如何在Gulp任务中通过本地服务器运行含History API的单元测试

嘿，我之前也碰到过一模一样的问题！根源在于Chrome出于安全限制，在file://协议下不允许调用History API的pushState方法——毕竟本地文件没有同源策略的约束，浏览器怕出安全问题。下面给你三个靠谱的解决办法，按推荐程度排序：

1. 用本地HTTP服务器运行测试（最推荐） #

直接放弃file://，把测试文件放在本地HTTP服务里跑，这是最符合浏览器安全模型的方案。

• 如果你用npm，先装个简单的HTTP服务器：

  npm install -g http-server
  

• 切换到你的测试文件所在目录，启动服务：

  http-server -p 8080
  

• 然后用Headless Chrome访问HTTP地址就行：

  chrome --headless --disable-gpu http://localhost:8080/你的测试文件.html
  

这样就和正常网站环境一致了，History API完全可以正常工作。

2. 给Headless Chrome加启动参数解除限制 #

如果你非得用file://协议，那就给Chrome加几个启动参数绕开限制：

chrome --headless --disable-gpu --allow-file-access-from-files --disable-web-security --user-data-dir=/tmp/chrome-test-profile file:///你的本地测试文件路径.html

参数解释：

• --allow-file-access-from-files：允许本地文件访问其他本地文件
• --disable-web-security：关闭同源策略限制
• --user-data-dir=/tmp/chrome-test-profile：指定临时用户数据目录，避免和你正常的Chrome配置冲突

不过这个办法不推荐长期用，毕竟关闭安全限制有潜在风险，只适合临时调试。

3. 在单元测试中Mock History API（最适合单元测试场景） #

既然是单元测试，其实我们根本不需要调用真实的History API！用Sinon直接Mock掉pushState就行，既不会触发浏览器限制，还能方便地断言方法是否被正确调用。

示例代码：

// 在测试用例的前置钩子中Mock
beforeEach(() => {
  // 替换window.history.pushState为Sinon stub
  sinon.stub(window.history, 'pushState');
});

// 测试完成后恢复原方法
afterEach(() => {
  window.history.pushState.restore();
});

// 你的测试用例
it('应该正确调用pushState', () => {
  // 执行你的应用代码，比如触发路由跳转
  yourApp.navigate('/some-path');
  
  // 断言pushState被调用，并且参数正确
  expect(window.history.pushState.calledOnce).to.be.true;
  expect(window.history.pushState.calledWith(
    { some: 'state' },
    '',
    '/some-path'
  )).to.be.true;
});

这个方案最适合单元测试，因为我们只需要验证代码是否正确调用了API，而不需要关心API本身的执行结果。

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