我有一个问题让我很难过,我不知道如何解决这个问题。我有一个非常简单的 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
时编写测试用例或修改现有测试用例以摆脱控制台错误。有没有人可以提供帮助,或者为我指明正确的方向?
非常感谢!
答案 0 :(得分:2)
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