使用Jest/Enzyme测试React应用时无法获取页面标题，如何解决？

我明白你遇到的问题了——用Enzyme测试组件时，没法拿到页面的标题，global.window.document.title总是空的。这其实是因为Enzyme的mount方法本质上是把组件挂载到虚拟DOM里，它不会自动加载你public/index.html里的内容，而且默认的测试环境里，document对象的标题不会被自动初始化。下面给你两种场景的解决方案：

场景1：在组件内动态设置标题（比如useEffect/componentDidMount里修改） #

如果你的页面标题是在React组件里动态设置的（比如App组件加载时更新document.title），那只需要在测试中直接访问document.title就行，create-react-app默认已经配置了jsdom，能模拟浏览器的document环境：

it('renders App and sets correct title', () => {
  // 先重置标题，避免其他测试的影响
  document.title = '';
  // 挂载组件，触发里面的标题设置逻辑
  mount(<App />);
  // 断言标题是否符合预期
  expect(document.title).toBe('test');
});

这样就能直接拿到组件设置后的标题了，不用绕弯子去访问global.window，直接用document.title就好。

场景2：测试index.html里写死的原始标题 #

如果你的标题是直接写在public/index.html的<title>标签里的，那Enzyme帮不上忙——因为它根本不会加载这个HTML文件。这时候可以用fs读取文件，再用cheerio来解析HTML内容：

1. 先安装cheerio（测试依赖）：

npm install --save-dev cheerio

2. 编写测试代码：

const fs = require('fs');
const cheerio = require('cheerio');

it('has the correct static title in index.html', () => {
  // 读取index.html的内容
  const htmlContent = fs.readFileSync('./public/index.html', 'utf8');
  // 用cheerio解析HTML
  const $ = cheerio.load(htmlContent);
  // 断言<title>标签的文本内容
  expect($('title').text()).toBe('你的预期标题');
});

为什么原来的方法不行？ #

你之前用global.window.document.title为空，是因为测试环境初始化的document是一个空的虚拟文档，并没有把index.html里的内容加载进去。Enzyme的mount只会渲染你的React组件生成的DOM，不会处理项目根目录的HTML文件，所以自然拿不到里面的标题啦。

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