userEvent.type 包装在 act 中时仅输入最后一个字符

Question

我在用户事件 github 中发现了一个问题，它说它在版本 12.0.1 中已解决，但我使用的是版本 12.1.5，并且不断收到错误。

\n

import React, { Fragment } from "react";\nimport { render, act } from "@testing-library/react";\nimport userEvent from "@testing-library/user-event";\nimport App from "./App";\n\ntest("Gets a code and renders it in a new route", () => {\n  const { getByLabelText } = render(<App />);\n  act(() => {\n    userEvent.type(getByLabelText("Code:"), "12345");\n  });\n  expect(getByLabelText("Code:")).toHaveValue("12345");\n});\n

\n

  \xe2\x97\x8f Gets a code and renders it in a new route\n\n    expect(element).toHaveValue(12345)\n\n    Expected the element to have value:\n      12345\n    Received:\n      5\n

\n

Answer 1

您的问题可能出在变更处理程序的实现上。我最近遇到了类似的问题，以下是我认为有效的方法与真正有效的方法。更多信息请参见此 github 评论。

\n

function handleChange(ev: FormEvent, key = "") {\n  ev.preventDefault();\n\n  // \xe2\x9c\x85 Passes\n  const value = (ev.target as HTMLInputElement).value;\n\n  setState(s => {\n    // \xe2\x9d\x8c Fails (individual characters instead of progressively built up strings)\n    // const value = (ev.target as HTMLInputElement).value;\n\n    return { ...s, [key]: value };\n  });\n}\n

\n