时间戳

首页 > 解决方案 > 表单写作测试（包括useState）

reactjs - 表单写作测试（包括useState）

问题描述

我想为我的表单编写一个测试，用 react 钩子（使用状态）处理，而且我正在使用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);
    });

标签： reactjsjestjsenzyme

解决方案

由于状态设置是异步操作，因此您必须将处理程序包装在 中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-wrap。

推荐阅读