SyntaxError : Invalid or unexpected token @import

Question

Jest와 Enzyme을 React 웹팩 프로젝트에 추가하려고합니다.

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 

말대꾸 파일은 다음과 같습니다

@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"] 
} 

내가 필요한 모든 로더 웹팩에있다, 나는 하루 종일 새우를 만들어서 아무런 문제없이 제공 할 수 있습니다. 그것은 내가 힘들어하는 농담의 소개입니다.

내가 여기 코드의 현재 상태와 지점을 추진해 왔습니다

이

Answer 1

https://github.com/nombienombie/react-redux-webpack/tree/feature/jest-unit-tests 내가 내 package.json에 다음과 같은 추가 :는 A 에 다음

"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" 
    } 
    }, 

및 추가 된 폴더를 조롱 :

그들은 웹팩에 의해 컴파일되지 않기 때문에

styleMock.js

module.exports = {} 

Answer 2

은 시험에 의해 수입 된 고정 자산은 어떻게 든 처리해야한다.

일반적인 접근법은 테스트 목적과 관련이 없으므로이를 조롱하는 것으로 구성됩니다. Jest는 moduleNameMapper 옵션을 사용하여 쉽게 조롱하거나 프록시 할 수 있습니다.