表单写作测试(包括useState)

Question

我想为我的表单编写一个测试，该测试使用react hook(使用状态(进行处理，并且我正在使用reactstrap。

包.json

"；酶"："3.11.0">

"；酶适配器反应器-16"："1.15.5〃

这是我在UserInput组件中的代码：

const handleInputChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
setEachEntry({ ...eachEntry, [event.target.name]: value });
};
<FormGroup>
<Label for="number">Number of simulations</Label>
<Input
name="number"
type="number"
placeholder="e.g. 10, 20"
onChange={handleInputChange}
value={number}
/>
</FormGroup>

<Button onClick={handleSubmit}>Simulate</Button>

这是UserInput.test.js中的代码

import React from "react";
import { shallow, mount } from "enzyme";
import UserInput from "./UserInput";
describe("check user input form", () => {
let wrapper = mount(<UserInput/>);

it('should set the password value on change event with trim', () => {
wrapper.find('input[type="number"]').simulate('change', {
target: {
value: 1,
},
});
expect(wrapper.find('input[type="number"]').prop('value')).toEqual(1);
});
})

但我在运行测试时遇到了一个错误：

● check user input form › should set the password value on change event with trim
expect(received).toEqual(expected) // deep equality
Expected: 1
Received: ""
31 |                      },
32 |              });
> 33 |              expect(wrapper.find('input[type="number"]').prop('value')).toEqual(1);
|                                                                         ^
34 |      });
35 | })
36 | 

有什么想法吗？

**更新/解决方案**

感谢Johannes的帮助，我需要使用act和update()来更新组件。

it('should set the password value on change event with trim', async () => {
await act(async () => {
wrapper.find('input[type="number"]').simulate('change', {
target: {
name:'number',
value: 1,
},
});
});
wrapper.update();
expect(wrapper.find('input[type="number"]').prop('value')).toEqual(1);
});

Answer 1

由于状态设置是一个异步操作，您必须将处理程序封装在act()中，以便jest可以等待操作的结果。

describe("check user input form", () => {
let wrapper = mount(<UserInput/>);

it('should set the password value on change event with trim', () => {
act(() => wrapper.find('input[type="number"]').simulate('change', {
target: {
value: 1,
},
}));
expect(wrapper.find('input[type="number"]').prop('value')).toEqual(1);
});
})

请参阅https://www.npmjs.com/package/enzyme-adapter-react-16#reacttestutilsact-包裹以获取更多细节。