React测试套件运行失败：TypeError: Cannot read property 'html' of undefined

我来帮你排查这个问题，你遇到的这个错误大概率是依赖版本不兼容导致的，再配合一些小配置调整就能解决，咱们一步步来：

1. 核心问题：Jest和JSDOM环境版本不匹配 #

你看你的依赖列表里，jest是29.3.1版本，但jest-environment-jsdom却停留在27.5.1——跨大版本的依赖会导致JSDOM环境初始化异常，进而抛出html属性未定义的错误。

解决步骤： #

• 先卸载旧版本的JSDOM环境：

  npm uninstall jest-environment-jsdom
  

• 安装和Jest完全同版本的JSDOM环境：

  npm install --save-dev jest-environment-jsdom@29.3.1
  

2. 检查Babel配置是否正确 #

确保你的项目根目录有正确的Babel配置文件（.babelrc或babel.config.js），配置需要包含React和ES6转译的预设：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react'
  ]
};

这个配置能确保Jest正确转译你的React组件代码，避免潜在的语法或环境兼容问题。

3. 优化测试文件的环境配置（可选） #

你在测试文件顶部加了@jest-environment jsdom注释，这本身没问题，但如果全局Jest配置和这个声明冲突，也可能出问题。建议你在项目根目录创建jest.config.js，全局设置测试环境：

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest'
  }
};

之后可以把测试文件里的/** @jest-environment jsdom */注释去掉，让全局配置生效，这样更统一。

4. 验证组件渲染逻辑 #

最后，确认你的LandingPage组件里确实存在文本TEST——虽然这不是当前错误的直接原因，但如果组件渲染失败（比如路由依赖未正确模拟），也可能间接引发奇怪的错误。你可以暂时简化测试代码，先验证基础渲染：

it("Should render LandingPage component", () => {
  render(
    <Router>
      <LandingPage />
    </Router>
  );
  // 先只打印调试信息，确认组件是否正常渲染
  screen.debug();
  // 再添加更通用的断言测试
  expect(screen.getByRole('heading')).toBeInTheDocument();
});

完成以上步骤后，重新运行测试，应该就能解决html未定义的问题了。

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