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

Question

这里有一个问题困扰着我，我不知道如何解决这个问题。我有一个非常简单的 React Hooks 功能组件，它使用 useState 钩子，但我在为它编写测试用例时遇到问题（in 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 时编写测试用例或修改现有测试用例来消除控制台错误。有没有人可以帮助我，或者为我指明正确的方向？

非常感谢！

Answer 1

react-dom/test-utils 模块的

TestRenderer.act() is same with act()。所以你只需要从 react-test-renderer 包中导入它。 @testing-library/react是另一个react测试库，你只需要两者选其一即可。一起使用会很混乱，因为每个测试库都有自己的测试方法和过程，可能不兼容。

act():

When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. react-dom/test-utils provides a helper called act() that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions:

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

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

Jest Unit Test for React Hooks component with act() error

reactjs

jestjs

react-testing-library

react-hooks

react-state