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の上部には、私は次のインポートを持っている：

• 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

それは代わりにコンポーネントをあざけるの、それは右下のサブコンポーネントのために起こっているように思える：import LoadingSpinner from 'loadingIndicator/LoadingIndicatorSpin.react';を私のテストを実行しているとき、私は次のエラーを取得しますお尻のファイルとフィットを投げる。私の理解は、あなたがそれをに言わない限り、Jestがすべてを模倣したということではなく、模擬です。

これらのテストを策定して、テスト中にサブコンポーネントがジストを爆発させないようにする正しい方法は何ですか？

Answer 1

各サブコンポーネントではなく、メインコンポーネントにSASSファイルとLESSファイルとCSSファイルが必要な場合は、コンポーネントを単独でテストする際にこの問題は発生しません。

私が提供したものが気に入らない場合は、この問題報告書に記載されているいくつかの解決策があります。 Issue 334