Jest test fail : SyntaxError : 예기치 않은 토큰 <

Question

이 오류를 찾을 위치를 모릅니다.

React와 함께 Typescript를 사용하고 단위 테스트를 위해 Jest와 Enzyme을 사용합니다.

Package.json 샘플 :

FAIL src/components/Component.test.tsx 

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?> 
                          ^

    SyntaxError: Unexpected token < 

편집 :에

"scripts": { 
    "start": "node server.js", 
    "bundle": "cross-env NODE_ENV=production webpack -p", 
    "test": "jest" 
    }, 
    "jest": { 
    "transform": { 
     "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js" 
    }, 
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$", 
    "moduleFileExtensions": [ 
     "ts", 
     "tsx", 
     "js", 
     "json" 
    ] 
    } 

실행 NPM 테스트 결과 나타나는 내가 정적 .svg 파일을로드 require을 사용하여 1 위를 발생합니다. 왜 그걸 처리 할 수 ​​없습니까? require를 사용할 때이 오류가 발생하는 것을 무시하는 방법이 있습니까?

Answer 1

Jest는 Webpack을 사용하지 않으므로 js/jsx가 아닌 다른 파일 확장명을로드하는 방법을 알지 못합니다. 다른 확장 기능에 대한 지원을 추가하려면 사용자 정의 변환기를 작성해야합니다.

"transform": { 
    "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js" 
}, 

지금 당신이 SVG 파일에 변압기를 추가해야합니다 변압기 중 하나는이 조각의 구성에서 정의한 타이프 변압기입니다. 의 당신의 농담의 설정

"transform": { 
     "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js", 
     "^.+\\.svg?$": "<rootDir>/svgTransform.js" 
    }, 

확장하고 다음과 같은 내용 물론

module.exports = { 
    process() { 
    return 'module.exports = {};'; 
    }, 
    getCacheKey() { 
    // The output is always the same. 
    return 'svgTransform'; 
    }, 
}; 

으로 루트 디렉토리에 svgTransform.js 파일을 만들어 보자, 그것은 항상 같은 값을 반환하는 기본 변압기입니다. 문서에

링크 : http://facebook.github.io/jest/docs/en/configuration.html#transform-object-string-string