reactjs - es6 - react-test-renderer
Error de polyfill `requestAnimationFrame` en pruebas de Jest (7)
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.
¡Encontré una solución!
Pasos:
- Crea el archivo
__mocks__/react.js
- 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;
- 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
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!
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.
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
).
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.
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
esto funcionó para mí:
- Instalar
raf
npm install --saveDev raf
o el yarn add -D raf
- Agregue el polyfill a sus
setupFiles
desetupFiles
en su configuraciónjest
enpackage.json
esta manera:
''setupFiles'': [''raf/polyfill'']
Nota: si tiene otros archivos de configuración en esta matriz, puede querer poner primero raf/polyfill
.