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-jest가 파일 처리 방법을 이해해야한다고 가정한다. 내 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 등록 정보를 사용하여 고정 자산을 mock으로 바꿀 수 있습니다. Jest Documentation - Static Assets

사용 npm install --save-dev identity-obj-proxy 설치할 수 있습니다 모의 등 신원-OBJ-프록시 : 여기

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

는 문서입니다.