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会解决问题，即使您将拼写错误留在那里也是如此。