错误：未实现：window.scrollTo。我们如何从 Jest 测试中消除这个错误？

Question

错误：

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Not implemented: window.scrollTo
          at module.exports (/Users/me/Projects/my-project/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
          at /Users/me/Projects/my-project/node_modules/jsdom/lib/jsdom/browser/Window.js:594:7

因为我们正在使用window.scrollTo(0,0).

还获得Not implemented Navigation：

window.location.replace(externa_link)发生同样的错误.assign。

我尝试使用 react-router 搜索解决方案，但所有示例都使用一些包含window.location.

有没有办法避免这个错误？还是隐藏？

我做了一些研究，发现 Facebook 团队不会解决这个问题。有没有办法在运行时抑制这些错误/警告jest test？

我们的代码不会中断，否则所有测试都会通过。

Answer 1

尝试运行 jest 命令--env=jsdom。这将模拟大多数浏览器功能并解决您的问题。

设置测试环境的方法还有很多，看看：

https://jestjs.io/docs/en/configuration#testenvironment-string

更新

这适用于window.scrollTo错误

https://qiita.com/akameco/items/0edfdae02507204b24c8

Answer 2

在*.test.js调用具有的组件的文件中window.scrollTo

it("renders without crashing", () => {
  window.scrollTo = jest.fn()
})

Answer 3

在导入后的测试文件顶部模拟它，如下所示：

window.scrollTo = jest.fn();

然后在描述中添加以下内容：

  afterAll(() => {
    jest.clearAllMocks();
  });

所以如果你还在每个之后重置所有模拟，你最终会得到这个 ::

afterEach(() => {
    jest.resetAllMocks();
  });
  afterAll(() => {
    jest.clearAllMocks();
  });

Answer 4

如果您只是想window.scrollTo(0,0)在测试环境中正常工作，您可以在任何setupFilesAfterEnv文件中实现它：

window.scrollTo = (x, y) => {
  document.documentElement.scrollTop = y;
}

Answer 5

@Chris 推荐的答案--env=jsdom对我来说不适用于最新的 cra（使用），但cra 测试文档提到了另一种对我有用的方法：react-scripts@5.0.1

之内setupTests.ts：

const windowMock = {
  scrollTo: jest.fn(),
};

Object.assign(global, global, windowMock);

基本上，我们在模拟对象中定义要忽略的窗口函数，然后重新分配全局对象以包含全局对象的所有属性，然后是窗口模拟对象的所有属性（在本例中为“属性”是函数）。

添加此内容并重新运行测试后，...Not implemented...错误消失了。这种方法的好处是，您也可以将其他要忽略的窗口函数添加到对象中windowMock，并且它们将保持分组在一起以减少代码混乱。

旁注：根据 cra 文档此处关于重写的内容--env，似乎 cra 已经--env=jsdom默认使用。

Answer 6

使用 create-react-app 时，最好将功能添加到设置测试文件中：

<project_name>\src\setupTests.js

我选择实施zgreen 的答案：

window.scrollTo = (x, y) => {
  document.documentElement.scrollTop = y;
}

这样，任何使用该功能的组件都将正确解析。