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

Question

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

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

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是不可写和不可配置的 native 函数。见property descriptors on MDN的讨论.

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



这意味着sinon无法窥探assign函数，因为它不能覆盖其属性描述符。

最简单的解决方案是包装所有对 window.location.assign 的调用。进入您自己的方法之一，如下所示:

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

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

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