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

发布于 2025-02-13 03:11:31 字数 446 浏览 0 评论 0原文

我正在编写一个检查两个字段的输入的测试,一个是类型文本,另一个是类型编号。

我可以在没有问题的情况下获取文本输入并进行测试:

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

当我使用screen.debug()检查测试时,这可以很好地工作。

但是数字输入大不相同。

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

在检查调试器时,这不会更改值。 我一直在网上搜索答案,但没有找到任何东西,有人可以帮忙吗? 我猜想我们的需求需要改变,但是由于任何实际用户可以简单地输入此框都应该。类型仍然可以工作吗?

I'm writing a test that checks the input of 2 fields, one is type text and the other is type number.

I can grab the text input without issue and test it:

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

This works perfectly when I check the test with screen.debug();

But the number input is very different.

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

This doesnt change the value when checking the debugger.
I've been searching online for an answer but failed to find anything, could someone help?
I'm guessing the userEvent needs changing but since any actual users can simply type into this box should .type still work?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

泪痕残 2025-02-20 03:11:31

我不知道为什么是这种情况,但是

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

上面仅显示文本输入为具有值。

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

这表明他们俩都有一个价值,不知道为什么,但是嘿,它的起作用。

I have no idea why this is the case but

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

The above only shows textInput as having a value.

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

This shows them both as having a value, no idea why but hey, its working.

挽你眉间 2025-02-20 03:11:31

好吧,我想我发现了。

似乎在vanillajs/html中,“ on Change”在ang中输入值时不会发射。

但是,当您单击小箭头以增加和减少数字时,它会发射。

sandbox https://codesandbox.io/s /on Change-on Input-number-8C2TQC

因此,似乎Userevent的工作方式有些相同,并且当您在具有“数字”类型的输入值中输入值时,不会触发更改事件。

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

,似乎考虑到它已被考虑到并反应实际上触发了场景后面的Onchange。但是您不会在屏幕上看到它。debug()

Ok I think I found out.

It seems that in vanillajs/html "onchange" DOES NOT FIRE when you type a value in an .

BUT it does fire when you click on the little arrows to increase and decrease the number.

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

So it seems that userEvent work a bit the same way and does not trigger a change event when you type a value in an input value that has the type "number".

That is probably why it's not reflected in the JSDOM when you use screen.debug() (probably because it uses the official MDN specification )

Still, it seems that it is taken into account and react actually trigger the onChange behind the scene. But you won't see it with the screen.debug()

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文