React Jest测试不能用于数字输入

Question

我正在编写一个测试，检查2个字段的输入，一个是类型文本，另一个是类型数字。

我可以毫无问题地抓取文本输入并测试它:

textInput = getAllByPlaceholderText('name');
userEvent.type(textInput[0], 'username');

当我使用screen.debug();

检查测试时，它可以完美地工作。但是输入的数字很不一样。

numInput = getAllByRole('spinbutton');
userEvent.type(numInput[0], '1');

这在检查调试器时不会改变值。我一直在网上搜索答案，但没有找到任何东西，有人可以帮助吗?我猜userEvent需要改变，但由于任何实际用户可以简单地输入到这个框。type仍然工作吗?

Answer 1

我不知道为什么会这样，但是

userEvent.type(textInput[0], 'username');
userEvent.type(numInput[0], '1');

上面的代码只显示了textput有一个值。

userEvent.type(numInput[0], '1');
userEvent.type(textInput[0], 'username');

这表明它们都有一个值，不知道为什么，但是嘿，它工作了。

Answer 2

我想我找到了。

似乎在香草/html "onchange"在。

中输入值时不会触发。但是当你点击小箭头来增加或减少数字时，它会开火。

沙箱: https://codesandbox.io/s/onchange-on-input-number-8c2tqc

因此，userEvent的工作方式似乎有点相同，并且当您在输入值中键入类型为&;number&;的值时不会触发更改事件。

这可能就是为什么当您使用screen.debug()时它没有反映在JSDOM中(可能是因为它使用官方MDN规范)

尽管如此，它似乎被考虑在内，并在幕后触发onChange。但是你不会看到它与屏幕。debug()