Jest/react-testing-library：点击一个按钮没有更新测试中的值

Question

初始问题我有一个简单的递增/递减组件。它显示了一个数字计数和 2 个递增或递减 1 的按钮。还有一个输入；如果在输入中提供了数值，则按钮使用输入值而不是 1 来增加/减少。我有这个测试：it(`should increment by input value, if value > 0`, () => {  const { input } = setup();  // Change input value to 4  fireEvent.change(input, {target: { value: 4}});  // Find and click +n button  const btn = screen.getByText(`+n`);  fireEvent.click(btn);  // Find and check updated count  const updatedCount = parseInt(screen.getByTestId(`count`).textContent, 10)  expect(updatedCount).toBe(4);})问题：此处更新后的计数返回 1（默认为useState），我预计为 4。expect(parseInt(input.value, 10)).toBe(4)通过并onChange连接输入。问题：为什么没有使用更新的输入值？附加信息：虽然我不确定，但我认为它可能没有更新useStateon change，所以我还添加了一个键盘事件来在我更改它的值后点击输入上的 enter 键。我希望进一步模拟用户并更新状态，但我没有运气。非常感谢任何帮助！对于任何不合适的地方，我深表歉意，最近几天我一直在看 Jest/RTL。

Answer 1

您的类型属性中有错字。改变这个

<input type="texts" {...} />

对此

<input type="text" {...} />

并且测试将再次起作用。我的猜测是，通过指定一个<input>无效的type属性，库不知道你是哪个角色input，所以它不能onchange正确处理事件。

我不确定为什么更新到react-scriptsand的新版本@testing-library/react会解决问题，即使您将拼写错误留在那里也是如此。