Question

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

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

我该如何解决？

我正在使用Jest 18.1.0。

Answer 1

找到了解决方法！

步骤：

创建文件__mocks__/react.js
将以下内容添加到__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;

运行开玩笑！

在对代码的评论中标记

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

Answer 2

这对我有用：

安装raf

npm install --saveDev raf或yarn add -D raf

将填充符添加到setupFiles jest配置中的package.json，如下所示：

'setupFiles': ['raf/polyfill']

注意：如果此阵列中有其他安装文件，您可能需要先放置raf/polyfill。

Answer 3

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

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

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

将该文件添加到package.json中的jest/setupFiles数组。

Answer 4

如果您使用的是create-react-app，其中一些解决方案将无效（或者在src/setupTests.js的情况下）。在global.requestAnimationFrame = (cb) => { cb(); };创建文件并在其中添加模拟效果很好：

localStorage

您还可以在其中添加其他全局模拟（例如navigator.serviceWorker和# Your sample matrix m.idx <- matrix(c(1,1,1,1,1,2,3,2,2,3,3,4,3,4,3,5,4,5,5,5,5), ncol = 3); # Construct empty matrix of the right dims m.val <- matrix(0, nrow = nrow(m.idx), ncol = max(m.idx)); for (i in 1:nrow(m.idx)) m.val[i, m.idx[i, ]] <- 1; m.val; # [,1] [,2] [,3] [,4] [,5] #[1,] 1 1 1 0 0 #[2,] 1 1 0 0 1 #[3,] 1 0 1 1 0 #[4,] 1 0 1 0 1 #[5,] 1 0 0 1 1 #[6,] 0 1 1 0 1 #[7,] 0 0 1 1 1）。

Answer 5

另一种有效的解决方案！

我们的想法是在每个规范之前加载一个简单的垫片，方法是使用jest配置中的setupFiles属性。

创建一个文件shim.js文件（最好在根目录中），并在其中包含以下代码：

global.requestAnimationFrame = (callback) => {
    setTimeout(callback, 0);
};

接下来，您可能会有冗余的代码，这些代码会在所有/大多数文件中重新出现 - 并且您希望将它们放在一个文件中，并在每个规范之前运行它们，以便执行此操作：

在根目录中创建一个setup.js文件。 D.R.Y的一个好的冗余代码是反应酶适配器配置代码。将其粘贴在这里

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

现在创建jest.config.js文件，以指定两个文件的路径

{
    module.exports = {
        "setupFiles": ["<rootDir>shim.js", "<rootDir>setup.js"]
    }
}

NB： jest配置文件需要json，因此请确保 json 已进入。另外，如果您的shim.js和{{ 1}}文件与setup.js不在同一个目录中，相应地调整路径。

希望这有帮助！

信用：https://github.com/facebook/jest/issues/4545

Answer 6

这是一种模拟requestAnimationFrame的现实方法：

let time;
const maxTimeElapsed = 2000;

beforeEach(() => {
  time = 0;
  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => {
    time += 100;
    if (time < maxTimeElapsed) {
      return cb(time) as any;
    }
  });
});

在测试中，

会反复调用RAF回调，直到达到您设置的最大经过时间为止。它会立即发生，因此您无需停止它。

Answer 7

只需将react-scripts升级到1.0.15或更高版本即可。它已在该版本之后正式修复。请参阅https://github.com/facebook/create-react-app/issues/3199

中的详细信息

搜索gaearon commented on 31 Oct 2017

的评论

Answer 8

原来是因为我升级了enzyme而未升级react和react-dom。

React 15.5带来了一些弃用，导致许多依赖库也必须更新。确保您正在更新react，react-dom并检查这些相关软件包的自述文件，以了解您必须安装的新库。例如，Enzyme 2.8.2现在需要react-addons-test-utils作为依赖。

Jest测试中的`requestAnimationFrame` polyfill错误

8 个答案: