reactjs - es6 - react-test-renderer

Error de polyfill `requestAnimationFrame` en pruebas de Jest

Question

Recibí este error después de actualizar a React cuando ejecuté mis pruebas unitarias de Jest:

Reaccionar depende de requestAnimationFrame. Asegúrese de cargar un polyfill en los navegadores más antiguos.

¿Cómo lo arreglo?

Estoy usando Jest 18.1.0.

Answer 1

¡Encontré una solución!

Pasos:

1. Crea el archivo __mocks__/react.js
2. Agregue lo siguiente en __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. Ejecutar broma!

Como se indica en los comentarios del código.

Esta es la solución de https://github.com/facebook/react/issues/9102#issuecomment-283873039

Answer 2

Otra solución de trabajo!

La idea es cargar un shim simple antes de cada especificación, usando la propiedad setupFiles en la configuración jest.

Cree un archivo shim.js (preferiblemente en su directorio raíz) y tenga este código en él:

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

A continuación, es posible que tenga un código redundante que vuelva a aparecer en todos / la mayoría de sus archivos, y desea ponerlos en un solo archivo y hacer que se ejecuten antes de cada especificación también, para hacer eso:

Cree un archivo setup.js en el directorio raíz también. Una buena parte del código redundante para DRY es el código de configuración del adaptador de enzima reactiva. Pegalo aqui

import Enzyme from ''enzyme'';
import Adapter from ''enzyme-adapter-react-16'';
Enzyme.configure({ adapter: new Adapter() });

Ahora cree el archivo jest.config.js , para especificar las rutas de acceso de los dos archivos

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

NB: el archivo jest config toma json , así que asegúrese de que esté en json . Además, si sus archivos shim.js y setup.js no están en el mismo directorio que su jest.config.js , ajuste la ruta según corresponda.

¡Espero que esto ayude!

Crédito: https://github.com/facebook/jest/issues/4545

Answer 3

Resulta que fue porque mejoré la enzyme sin actualizar react y react-dom .

React 15.5 produce algunas desaprobaciones que hicieron que muchas bibliotecas dependientes también tuvieran que actualizarse. Asegúrese de que está actualizando react , react-dom y verifique el README de esos paquetes dependientes para las nuevas bibliotecas que tiene que instalar. Por ejemplo, Enzyme 2.8.2 ahora requiere react-addons-test-utils como una dependencia.

Answer 4

Si está utilizando la aplicación create-react-app, algunas de estas soluciones no funcionarán bien (o en absoluto, en el caso de setupFiles ). Lo que funciona bien es crear un archivo en src/setupTests.js y agregar tu mock allí:

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

También puede agregar otras localStorage globales allí (por ejemplo, localStorage y navigator.serviceWorker ).

Answer 5

Si solo necesita realizar un relleno múltiple para las pruebas, entonces realmente no necesita la regulación.

Crea un nuevo archivo con este código:

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

Agregue ese archivo a la matriz jest/setupFiles en su package.json.

Answer 6

Simplemente actualice sus react-scripts a 1.0.15 o superior. Se ha corregido oficialmente después de esa versión. Ver más detalles en https://github.com/facebook/create-react-app/issues/3199

Buscar el comentario de gaearon commented on 31 Oct 2017

Answer 7

esto funcionó para mí:

1. Instalar raf

npm install --saveDev raf o el yarn add -D raf

2. Agregue el polyfill a sus setupFiles de setupFiles en su configuración jest en package.json esta manera:

''setupFiles'': [''raf/polyfill'']

Nota: si tiene otros archivos de configuración en esta matriz, puede querer poner primero raf/polyfill .