带有 act() 错误的 React Hooks 组件的 Jest 单元测试

如何解决带有 act() 错误的 React Hooks 组件的 Jest 单元测试

我有一个问题让我很难过，我不知道如何解决这个问题。我有一个非常简单的 React Hooks 功能组件，它使用 useState 钩子，但是我在为它编写测试用例时遇到了问题（在 Jest 中），@testing-library/react .

这里是组件的主要内容：

// MyComponent.jsx

import InputComponent from '/some/folder/InputComponent';

...

export function MyComponent() {

  const [randomStateVariable,setRandomStateVariable] = useState('');

  ...

  const handleChange = value => setRandomStateVariable(value);

  ...

  return (
    <InputComponent
      handleChange={handleChange}
      input={{
        value: randomStateVariable || ''
      }}
    />
  );

}

然后对于我的单元测试文件，我正在执行以下操作：

// MyComponent.test.js

import renderer from 'react-test-renderer';
import { render } from '@testing-library/react';

...

import MyComponent from 'MyComponent';

...

it('runs handleChange',() => {
  
  const props = {
    actions: {
      someAction: jest.fn()
    },input: 'some input value'
  };
  
  ...

  const component = renderer.create(<MyComponent {...props} />);
  const inputSelect = component.root.findByType(InputComponent).props;

  inputSelect.handleChange(props.input);

  expect(props.actions.someAction).toHaveBeenCalledWith(props.input);

});

现在，所有测试都通过了（我在文件中的其他测试用例中使用了 @testing-library/react），但是在运行测试套件时出现以下错误： >

When testing,code that causes React state updates should be wrapped into act(...):

我不知道如何纠正这个问题。我没有安装 @testing-library/react-hooks 包，我不确定应该从哪里导入 act。我应该为此使用 react-test-renderer 并从该包导入 act，还是应该从 @testing-library/react 导入它？

我不知道如何在使用 act 时编写测试用例或修改现有测试用例以摆脱控制台错误。有没有人可以提供帮助，或者为我指明正确的方向？

非常感谢！

解决方法

TestRenderer.act() 与 react-dom/test-utils 模块的 act() 相同。所以你只需要从 react-test-renderer 包中导入它。 @testing-library/react 是另一个 react 测试库，你只需要在两者中选择一个即可。一起使用会比较混乱，因为每个测试库都有自己的测试方法和流程，可能不兼容。

act()：

在编写 UI 测试时，渲染、用户事件或数据获取等任务可被视为与用户界面交互的“单元”。 react-dom/test-utils 提供了一个名为 act() 的帮助程序，可确保在您做出任何断言之前，与这些“单元”相关的所有更新都已处理并应用于 DOM：

inputSelect.handleChange(props.input) 触发更新操作，应该放在 act() 中。

例如

MyComponent.test.tsx：

import React,{ useState } from 'react';
import InputComponent from './InputComponent';

export function MyComponent({ actions,input }) {
  const [randomStateVariable,setRandomStateVariable] = useState('');

  const handleChange = (value) => setRandomStateVariable(value);

  return (
    <InputComponent
      handleChange={handleChange}
      input={{
        value: randomStateVariable || '',}}
    />
  );
}

MyComponent.test.tsx：

import React from 'react';
import renderer,{ act } from 'react-test-renderer';
import { MyComponent } from './MyComponent';
import InputComponent from './InputComponent';

describe('65786455',() => {
  it('runs handleChange',() => {
    const props = {
      actions: {
        someAction: jest.fn(),},input: 'some input value',};

    const component = renderer.create(<MyComponent {...props} />);
    const inputSelect = component.root.findByType(InputComponent).props;
    expect(inputSelect.input.value).toBe('');
    act(() => {
      inputSelect.handleChange(props.input);
    });
    expect(component.root.findByType(InputComponent).props.input.value).toBe('some input value');
  });
});

单元测试结果：

 PASS  examples/65786455/MyComponent.test.tsx
  65786455
    ✓ runs handleChange (24 ms)

--------------------|---------|----------|---------|---------|-------------------
File                | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------|---------|----------|---------|---------|-------------------
All files           |     100 |      100 |     100 |     100 |                   
 InputComponent.tsx |     100 |      100 |     100 |     100 |                   
 MyComponent.tsx    |     100 |      100 |     100 |     100 |                   
--------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed,1 total
Tests:       1 passed,1 total
Snapshots:   0 total
Time:        5.878 s