如何使用Jest测试React组件中包含window.location.href的if else条件

测试代码补全 #

因为Jest默认用jsdom模拟浏览器环境，直接修改window.location.href会触发页面跳转逻辑导致测试中断，且原生location属性默认不可重写，你需要先对该属性做Mock，再补充断言。

前置Mock配置 #

在当前测试用例开头，或者统一放在beforeEach钩子中添加Mock代码：

Object.defineProperty(window, 'location', {
  value: { href: '' },
  writable: true
});

如果多个用例都用到了这个Mock，可以在afterEach中重置属性，避免用例之间互相污染：

afterEach(() => {
  window.location.href = '';
});

TODO位置补充的断言代码 #

直接判断window.location.href的赋值是否符合预期即可：

expect(window.location.href).toBe('/page-not-found.html');

如果要覆盖非404的错误分支，只需要构造response.status不等于404的错误实例，然后断言window.location.href仍然为空即可。

进阶学习资料推荐 #

• Jest官方中文文档：覆盖断言、Mock、异步测试等所有核心能力，是最权威的入门+进阶参考资料
• React测试库官方文档：配合React项目做测试时，里面的最佳实践可以帮你避开很多无效测试的坑
• TypeScript + Jest 类型化测试教程：可以帮你规范测试代码的写法，避免测试代码本身出现类型错误
• 对应状态管理库的测试专项教程：如果你用的是Redux这类状态管理库，专门学习对应的异步action测试方法，能更系统掌握这类thunk逻辑的测试思路

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