Jest test fail：SyntaxError：予期しないトークン<

Question

このエラーをどこで探すか不明です。

ReactでTypescriptを使用し、ユニットテストにJestとEnzymeを使用する。

Package.jsonサンプル：

でNPMのテスト結果を実行

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

：

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 < 

編集：私は、静的.svgファイルをロードするためにrequireを使用する最初の場所に起こっているように見えます。なぜそれを処理できないのですか？ 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