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

Question

我有一个问题困扰着我，我不知道如何解决这个问题。我有一个非常简单的 React Hooks 功能组件，它使用 useState 钩子，但是我在为它编写测试用例时遇到了问题（开玩笑），使用 @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，以摆脱控制台错误。有没有人可以提供帮助，或者为我指出正确的方向？

非常感谢！

Answer 1

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