如何使用Jest测试包含Context与useEffect的React.js页面？

问题1：导入的页面组件错误 #

你当前测试代码中导入的是src/pages/index.tsx首页组件，不是目标battlefield页面，修复导入路径：

// 原错误导入
import Battlefield from '../../pages'
// 修改为
import Battlefield from '../../pages/battlefield'

问题2：未mock Next.js的useRouter #

测试环境没有内置Next的路由实例，调用router.push会直接报错，在测试文件顶部添加useRouter的mock：

jest.mock('next/router', () => ({
  useRouter: jest.fn(() => ({
    push: jest.fn()
  }))
}))

问题3：data-test-*属性名不符合规范 #

testing-library的getByTestId默认匹配的属性是data-testid，你当前mock的Person组件写的是data-test-id，属性名不匹配导致找不到元素，修改mock组件：

jest.mock('../../components/Person', () => {
  return {
    __esModule: true,
    default: function mock() {
      return <div data-testid="person" />
    }
  }
})

可选优化：补全useEffect依赖 #

Battlefield页面的useEffect没有添加依赖数组，会导致每次组件渲染都重复执行，建议修改为：

useEffect(() => {
  if (!person.name) {
    router.push('/')
  }
}, [person.name, router])

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