使用 Karma/Mocha/Sinon/Chai 进行单元测试 window.location.assign

Question

我正在尝试使用 Karma 作为我的测试运行器、Mocha 作为我的测试框架、Sinon 作为我的模拟/存根/间谍库和 Chai 作为我的断言库来对一个函数进行单元测试。我在 Karma 配置中使用 Chromium 作为我的无头浏览器。

但是，对于为什么我收到以下错误，我完全感到困惑：

TypeError: Cannot redefine property: assign

...当我对此运行 npm test 时：

function routeToNewPlace() {  
  const newLoc = "/accountcenter/content/ac.html";
  window.location.assign(newLoc);
}
describe('tests', function() {
  before('blah', function() {
    beforeEach('test1', function() {
          window.onbeforeunload = () => '';
      });
    });
  it('routeToNewPlace should route to new place', function() {
    expectedPathname = "/accountcenter/content/ac.html";
    routeToNewPlace();
    const stub = sinon.stub(window.location, 'assign'); 
    assert.equal(true, stub.withArgs(expectedUrl).calledOnce);
    stub.restore();
  });
});

如您所见，我试图为 window.location 分配一个空字符串，但这似乎没有帮助。

这是我的 karma.config.js：

module.exports = function(config) {
    config.set({
      frameworks: ['mocha', 'chai', 'sinon'],
      files: ['jstests/**/*.js'],
      reporters: ['progress'],
      port: 9876,  // karma web server port
      colors: true,
      logLevel: config.LOG_INFO,
      //browsers: ['Chrome', 'ChromeHeadless', 'MyHeadlessChrome'],
      browsers: ['ChromeHeadless'],
      customLaunchers: {
        MyHeadlessChrome: {
          base: 'ChromeHeadless',
          flags: ['--disable-translate', '--disable-extensions', '--remote-debugging-port=9223']
        }
      },
      autoWatch: false,
      // singleRun: false, // Karma captures browsers, runs the tests and exits
      concurrency: Infinity
    })
  }

任何想法将不胜感激。

Answer 1

您看到的问题是这window.location.assign是一个不可写且不可配置的本机函数。请参阅MDN 上对属性描述符的讨论。

看看这个截图，它可能会帮助你理解：

这意味着 sinon 无法监视该assign函数，因为它无法覆盖其属性描述符。

最简单的解决方案是将所有调用包装window.location.assign到您自己的方法之一中，如下所示：

function assignLocation(url) {
  window.location.assign(url);
}

然后在您的测试中，您可以执行以下操作：

const stub = sinon.stub(window, 'assignLocation');