scssで反応ユニットテストを実行中

Question

私はscssファイルを使用している反応コンポーネントを持っています。

$searchImage: url('../../../stylesheets/images/Search.svg'); 
.srchBoxContaner { 
    padding: 1.5rem 1.5rem 0rem 1.5rem; 
} 

を次のようにSCSSファイルには、ザ・コンポーネントは、私が冗談、酵素、およびSinonを使用しています次のインポート

import styles from './IncrementalSearch.scss'; 

を持っている標準のコンポーネントである反応です。私のユニットテストは、私は次のようなエラーに取得するテストを実行すると

describe('<IncrementalSearch />',() => { 
    it('calls componentDidMount',() => { 
     sinon.spy(IncrementalSearch.prototype, 'componentDidMount'); 
     const wrapper = mount(<IncrementalSearch />); 
     expect(IncrementalSearch.prototype.componentDidMount.calledOnce).to.equal(true); 
    }); 
}); 

を次のようにある

予期しないトークン（2：0） 1 | $ searchImage：url（ '../../../ stylesheets/images/Search.svg'）;

2 | .srchBoxContaner { |^ 3 |パディング：1.5rem 1.5rem 0rem 1.5rem; 4 | }

これをどのように修正できますか。

Answer 1

あなたが実際にテスト環境でscssファイルを読み込もうとしないのはおそらく、Nodeがscssファイルをjavascriptとして解析しようとするからです。

テスト環境でscssファイルをモックアウトする必要があります。 moduleNameMapperを使用してこれを行うことができます。https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string

"moduleNameMapper": { 
    "\\.(css|scss)$": "<rootDir>/tests/config/jest/styleMock.js" 
    }, 

styleMock.js

module.exports = {}