SyntaxError：無効または予期しないトークン@import

Question

JestとEnzymeをReact Webpackプロジェクトに追加しようとしています。

コンポーネントにテストを追加するまで、Googleフォントをインポートするスタイルシートを使用するまで、すべてが機能しています。

私が手にエラーがある：

● Test suite failed to run 
    /Users/dev/Code/Git/react-redux-webpack/src/App.sass:1 
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed') 
                          ^
    SyntaxError: Invalid or unexpected token 

SASSファイルは次のようになります。

@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed') 

body 
    background: #f9f9f9 
    color: #444444 
    font-family: 'Barlow Condensed', sans-serif 
    text-align: center 

.container 
    width: 100% 
    max-width: 960px 
    margin: 0 auto 

.container__logo--image 
    position: absolute 
    top: 50% 
    left: 50% 
    margin-left: -75px 
    margin-top: -75px 

マイ.babelrc：

{ 
    "presets": [ 
    "react", 
    "stage-0", 
    [ 
     "env", 
     { 
     "targets": { 
      "node": "6.10", 
      "browsers": ["last 2 versions", "safari >= 7"] 
     } 
     } 
    ] 
    ], 
    "plugins": ["transform-class-properties"] 
} 

私はWebPACKの中のすべての必要なローダーを持っています、私は問題なしで一日中酒を作り提供することができます。私が苦労しているJestの紹介です。

私は私のpackage.jsonに以下を追加し、ここでのコードの現在の状態とhttps://github.com/nombienombie/react-redux-webpack/tree/feature/jest-unit-tests

Answer 1

をブランチをプッシュしている：

"jest": { 
    "moduleNameMapper": { 
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", 
     "\\.(css|sass)$": "<rootDir>/__mocks__/styleMock.js" 
    } 
    }, 

とに以下を追加しましたがフォルダを皮肉っ：

fileMock.js

彼らはWebPACKのでコンパイルされませんので

styleMock.js

module.exports = {} 

Answer 2

は、テストによってインポート静的な資産は、何らかの形で処理する必要があります。

典型的なアプローチは、テスト目的には関係ないので、それらを模倣することです。 JestはmoduleNameMapperオプションを公開して、それらを簡単に模擬/プロキシすることができます。