javascript - React 测试库 - fireEvent 不会更改输入值

Question

🙂 我正在学习 React 中的测试，但 fireEvent 不会改变我输入的值。不幸的是，我不知道为什么？

我正在渲染 BuyPlace 组件。在这个组件中，我有一个具有输入组件的表单(这些组件只是带有输入的标签，我正在将 Prop 传递给表单上的这个组件)。

在 screen.debug() 上，我可以看到我的组件已根据此表单和所有这些输入正确呈现。

另外，我的输入在我的测试中被正确捕获，我检查过这个。

这是我的测试:

test("should change input value", async () => {
render(
<HashRouter>
<UserContext.Provider value={{ user: true }}>
<BuyPlace />
</UserContext.Provider>
</HashRouter>
);
const nameInputEl = screen.getByPlaceholderText("Podaj własną nazwę");
fireEvent.change(nameInputEl, {
target: { value: "Michał" },
});
await waitFor(() => {
expect(nameInputEl.value).toBe("Michał");
});
});

测试未通过。当然，我的应用程序运行正常，但在测试中它不起作用。

这是我组件上的 handleInputChange:

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {
setInputValues((prevValues) => {
return {
...prevValues,
[e.target.name]: e.target.value,
}
});
};

我发现的每个解决方案都不起作用...我的输入值始终为空字符串。有人可以帮我弄这个吗？我想学习写好的测试，但我不知道问题出在哪里。

编辑 我在 screen.debug() 上看到了一些有趣的东西。

我在测试中的输入在没有 onchange 属性的情况下呈现，这在测试中是正常的吗？检查一下:

                   <input
                    id="name"
                    name="name"
                    placeholder="Podaj własną nazwę"
                    type="text"
                    value=""
                  />

在我呈现的父组件上，我有 handleInputChange 并且此函数正在传递给输入组件。在现场一切正常，但在测试中没有...也许这就是 fireEvent 不工作的原因？

但为什么在测试时我的输入没有 onchange 属性？

编辑 2 解决方案

哇，3天后我找到了问题所在!

问题出在更改值的 setState 函数中。我有:

const myValues = (object with values);

setState((previousValues) => {
...previousValues,
[e.target.name]: e.target.value
})

但是在改变之后:

setState({
...myValues,
[e.target.name]: e.target.value
})

我的测试通过了。所以我不能在 setState 上使用 previousState 回调——这就是我的测试不正确的原因。 但为什么？这是我的问题!

Answer 1

建议使用 userEvent 而不是 fireEvent。 Especially if you are using Material-UI ，因为使用 fireEvent 而不是 userEvent

存在问题

Note by testing library documentation

Most projects have a few use cases for fireEvent, but the majority of the time you should probably use @testing-library/user-event.

而不是 fireEvent.change 你会做这样的事情

userEvent.type(nameInputEl, 'Michal');