如何修复“TypeError：window.location 不是函数”？

Question

当我运行包含有关 window.location 的逻辑的单元测试时。我会在我的终端上收到这个错误。

TypeError: window.location[(intermediate value)(intermediate value)(intermediate value)] 不是函数

      35 |   localVue.use(VueRouter);
    > 36 |   const router = new VueRouter(...routerOptions);
      37 | 
      38 |   Object.keys(filters).forEach(key => {
      39 |     localVue.filter(key, filters[key]);

我的示例单元测试代码仅包含有关 window.location 的逻辑

   beforeEach(() => {
      global.window = Object.create(window);
      const url = "http://localhost.com";
      Object.defineProperty(window, "location", {
        value: {
          href: url
        },
        writable: true
      });
    });

有人遇到过这种情况吗？在这种情况下我真的需要帮助。

Answer 1

在您的jest.config.js 中，您可以添加一个setup files 条目，该条目指向具有一些自定义配置的文件。在那里，您可以为window 对象声明方法和属性。例如，您的 jest.config.file 可能是：

module.exports = {
  ...
  'setupFiles': ['./tests/unit/config.main.js'],
  ...
}

然后，在/tests/unit/config.main.js（或任何路径）中，您只需添加：

window.location = { value: { href: "http://localhost/" }};

在我自己的设置文件中，我也有这个 window 助手，例如：

window.alert = (msg) => { console.log(msg); };
window.matchMedia = () => ({});
window.scrollTo = () => { };

因此，在您的应用中调用这些 window 方法的代码不会破坏测试。

（实际上我从未尝试在设置文件中设置window.location，但这应该可以正常工作）。