javascript - test - Cómo simular subcomponentes cuando la unidad prueba un componente React con Jest

react-test-renderer

Question

Tengo un componente React sobre el que estoy tratando de escribir algunas pruebas. Lo he dividido a la prueba más simple posible.

jest.dontMock(''../Overlay.react.js'');

import React from ''react'';
import ReactDOM from ''react-dom'';

var Overlay = require(''../Overlay.react.js''); // this is the culprit!

describe(''Overlay'', () => {
    it(''should work'', () => {
        expect(true).toEqual(true);
    });
});

Cuando requiero el componente que estoy tratando de probar, parece que no se está burlando de sus subcomponentes. En la parte superior de Overlay.react.js , tengo la siguiente importación: import LoadingSpinner from ''loadingIndicator/LoadingIndicatorSpin.react''; Al ejecutar mi prueba, obtengo el siguiente error:

• SyntaxError: /Users/dev/work/react-prototype/src/components/root/routes/components/subset1/components/Overlay.react.js: / Users / dev / work / reac-prototype / src / components / root / route / components / loadingIndicator / LoadingIndicatorSpin.react.js: /Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/sass/style.sass: Inesperado token ILLEGAL

Parece que en lugar de burlarse de los componentes, va directamente al archivo sass del subcomponente y lanza un ataque. Mi entendimiento fue que Jest se burla de todo, excepto por lo que le dices para que no se burle.

¿Cuál es la forma correcta de formular estas pruebas para que los subcomponentes no hagan explotar las bromas cuando se importan durante una prueba?

Answer 1

Si necesitara sus archivos SASS y LESS y CSS en el componente principal en lugar de en cada subcomponente, no obtendrá este problema al probar los componentes por su cuenta.

Hay otras soluciones mencionadas en este informe de problemas si no te gusta la que te proporcioné. Número 334