Как издеваться над субкомпонентами при модульном тестировании компонента React с Jest

Question

У меня есть компонент React, который я пытаюсь написать несколько тестов. Я сломал его до самого простого теста.

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); 
    }); 
}); 

При требовании компонента, который я пытаюсь проверить, он, кажется, не издевается над своими подкомпонентами. В верхней части Overlay.react.js, у меня есть следующий импорт: import LoadingSpinner from 'loadingIndicator/LoadingIndicatorSpin.react'; При запуске моего теста, я получаю следующее сообщение об ошибке:

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

Похоже, что вместо насмешливых компонентов, он будет вплоть до суба-компоненты sass file и бросать подгонку. Мое понимание было то, что Джест издевается над всем, кроме того, что вы говорите, не макет.

Каков правильный способ сформулировать эти тесты, чтобы подкомпоненты не приводили к взрыву при вводе во время теста?

Answer 1

Если вам понадобится ваш файл SASS и LESS и CSS в главном компоненте, а не в каждом подкомпоненте, вы не получите эту проблему при проверке компонентов самостоятельно.

Есть некоторые другие решения, упомянутые в этом выпуске, если вам не нравится тот, который я предоставил. Issue 334