Jest测试中的`requestAnimationFrame` polyfill错误

Question

在我运行Jest单元测试时升级到React后出现此错误:

React取决于requestAnimationFrame.确保在旧版浏览器中加载polyfill.

我如何解决它？

我正在使用Jest 18.1.0.

Answer 1

找到了解决方法!

脚步:

1. 创建文件 __mocks__/react.js
2. 将以下内容添加到 __mocks__/react.js

const react = require('react');
// Resolution for requestAnimationFrame not supported in jest error :
// https://github.com/facebook/react/issues/9102#issuecomment-283873039
global.window = global;
window.addEventListener = () => {};
window.requestAnimationFrame = () => {
  throw new Error('requestAnimationFrame is not supported in Node');
};

module.exports = react;

3. 跑开!

正如对代码的评论所标记的那样

这是来自https://github.com/facebook/react/issues/9102#issuecomment-283873039的解决方案

Answer 2

这对我有用:

1. 安装 raf

npm install --saveDev raf 要么 yarn add -D raf

2. setupFiles在您的jest配置中添加polyfill ,package.json如下所示:

'setupFiles': ['raf/polyfill']

注意:如果此阵列中有其他安装文件,则可能需要先放置raf/polyfill.

Answer 3

如果您只是需要将其填充进行测试,那么您实际上并不需要限制.

使用以下代码创建一个新文件:

global.requestAnimationFrame = function (cb) {
    return setTimeout(cb, 0);
};

将该文件添加到jest/setupFilespackage.json中的数组中.

Answer 4

如果您使用 create-react-app，其中一些解决方案将无法正常工作（或者根本无法正常工作，在 的情况下setupFiles）。什么工作得很好是src/setupTests.js在那里创建一个文件并在那里添加你的模拟：

global.requestAnimationFrame = (cb) => { cb(); };

您还可以在其中添加其他全局模拟（例如localStorage和navigator.serviceWorker）。