使用Jest测试React简单按钮失败，报render相关错误该如何解决？

你代码存在以下几处错误：

• 测试代码错误导入react-dom的render方法，React组件单元测试需要使用@testing-library/react提供的render方法
• 使用getByTestId查询元素时，你仅给按钮设置了id="btn"，但getByTestId只会匹配data-testid属性的元素，两者不匹配
• getByTestId、fireEvent两个方法没有在测试文件中导入
• 要验证点击后触发alert的逻辑，需要提前mockwindow.alert方法，否则测试无法验证回调是否正常执行

修正后的App.js代码 #

function clickMe() {
  alert("Hello")
}

function App() {
  return (
    <div className="App">
      {/* 新增data-testid属性匹配测试查询规则 */}
      <button data-testid="btn" id="btn" onClick={clickMe}>Click Me!!</button>
    </div>
  )
}

export default App;

修正后的App.test.js代码 #

import React from 'react'
// 从测试工具库导入所需方法
import { render, screen, fireEvent } from '@testing-library/react'
import App from './App'

test("点击按钮触发alert", () => {
  // 提前mock window.alert方法
  window.alert = jest.fn()
  render(<App />)
  // 通过screen查询对应元素
  const button = screen.getByTestId('btn')
  fireEvent.click(button)
  // 验证alert调用符合预期
  expect(window.alert).toHaveBeenCalledWith('Hello')
})

依赖检查 #

如果运行仍报错，确认你已经安装测试相关依赖，未安装可执行以下命令：
npm install @testing-library/react @testing-library/jest-dom @testing-library/user-event -D

内容的提问来源于stack exchange，提问作者StephJ