类型错误：无法读取未定义的属性（读取“单击”）。fireEvent.click 有效，但 userEvent.click 无效。为什么？

Question

刚刚开始使用 Jest 学习 React 测试，并且正在为一些简单的事情而苦苦挣扎。当我调用 userEvent.click(btn) 时，测试失败，提示 userEvent.click() 未定义。

\n

import { render, fireEvent, screen } from "@testing-library/react";\nimport { userEvent } from "@testing-library/user-event";\nimport '@testing-library/jest-dom';\nimport '@testing-library/dom'\nimport { Button } from "./Button";\n\n\ndescribe("clicks button", () => {\n  it("onclick", () => {\n    render(<Button />);\n    screen.debug();\n    let btn = screen.getByTitle("dummyButton");\n    expect(btn.innerHTML).toBe("Click me");\n    userEvent.click(btn);\n    btn = screen.getByTitle("dummyButton");\n    expect(btn.innerHTML).toBe("ButtonClicked");\n  });\n});\n

\n

export const Button = () =>{\n    const [buttonText, setButtonText] = useState("Click me")\n    const handleClick = () =>{\n        setButtonText("ButtonClicked")\n    }\n    return(\n        <div>\n            <button onClick={handleClick} title="dummyButton">{buttonText}</button>\n        </div>\n    )\n}\n\n\n  \xe2\x97\x8f clicks button \xe2\x80\xba onclick\n\n    TypeError: Cannot read properties of undefined (reading 'click')\n\n      17 |     let btn = screen.getByTitle("dummyButton");\n      18 |     expect(btn.innerHTML).toBe("Click me");\n    > 19 |     userEvent.click(btn);\n         |               ^\n      20 |     btn = screen.getByTitle("dummyButton");\n      21 |     expect(btn.innerHTML).toBe("ButtonClicked");\n      22 |   });\n\n      at Object.<anonymous> (src/Components/Button/Button.test.js:19:15)\n

\n

Answer 1

似乎这是基于文档的默认导出：

import userEvent from '@testing-library/user-event'

您可以更新导入并重试吗？