Babel jestが読み込まれたCSSモジュールで動作しません

Question

jestを使用して単純なコンポーネントテストを実行すると、次のエラーが発生します。

FAIL src/components/header/Header.test.tsx 
    ● Test suite failed to run 

    /Volumes/WorkSpace/Projects/wc2/src/components/header/Header.scss:1 
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "../../styles/variables"; 
                          ^
    SyntaxError: Invalid or unexpected token 

     at ScriptTransformer._transformAndBuildScript (../../../../Users/micahblu/.nvm/versions/node/v7.2.0/lib/node_modules/jest/node_modules/je 
st-runtime/build/ScriptTransformer.js:289:17) 
     at Object.<anonymous> (src/components/header/Header.tsx:2:1) 

コンポーネントはheader.scssをインポートします。元のエラーは、ファイルの先頭にある@importステートメントについて不平を言っていましたが、それでも、 '。 cssクラス宣言の冒頭にあります。それは明らかにCSSで全く動作しませんか？またはscss？私はcssとsassのためのすべての適切なbabelローダーを持っており、彼らは開発でうまく動作し、私はバベル嫌いがファイルを処理する方法を理解する必要がありますと思います。私のpackage.jsonで

私が持っている：

"jest": { 
    "transform": { 
     "^.+\\.(tsx|ts)?$": "typescript-babel-jest" 
    }, 
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$", 
    "moduleFileExtensions": [ 
     "ts", 
     "tsx", 
     "js", 
     "json" 
    ] 
    } 

Header.test.tsx

import React from 'react' 
import renderer from 'react-test-renderer' 
import Header from './Header' 

test('output',() => { 
    const component = renderer.create(<Header />) 
    expect(component).toMatchSnapshot() 
}) 

Header.tsx

import React from 'react' 
import { Link } from 'react-redux-router' 
import "./Header.scss" 

const Header =() => (
    <header> 
     <h1>My header</h1> 
    </header> 
) 

export default Header 

Header.scss

@import "../../styles/variables"; 

header { 
    background: white 
} 

Answer 1

moduleNameMapperプロパティを使用して、静的資産をモックで置き換えることができます。ここで

"jest": { 
    "transform": { 
     "^.+\\.(tsx|ts)?$": "typescript-babel-jest" 
    }, 
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$", 
    "moduleNameMapper": { 
     "^.+\\.scss$": "identity-obj-proxy" 
    }, 
    "moduleFileExtensions": [ 
     "ts", 
     "tsx", 
     "js", 
     "json" 
    ] 
} 

はドキュメントです：Jest Documentation - Static Assets

はnpm install --save-dev identity-obj-proxyでインストールすることができますモックとしてのアイデンティティ-OBJ-プロキシを使用してください。