web-dev-qa-db-ja.com

Jestテストの失敗：SyntaxError：予期しないトークン<

このエラーを探す場所がわからない。

TypeScriptとReact、およびJestとEnzymeをユニットテストに使用します。

Package.jsonサンプル：

"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テストの実行結果：

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 <

編集：requireを使用して静的.svgファイルをロードする最初の場所で発生しているようです。なぜそれを処理できないのですか？ requireを使用するときにこのエラーを無視する方法はありますか？

reactjstypescriptjestjs
17
cbll

JestはWebpackを使用しないため、js/jsx以外のファイル拡張子をロードする方法がわかりません。他の拡張機能のサポートを追加するには、カスタムトランスフォーマーを作成する必要があります。トランスフォーマーの1つは、このフラグメントの構成で定義したTypeScriptトランスフォーマーです。

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

次に、svgファイルのトランスフォーマーを追加する必要があります。 jest設定を拡張しましょう

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

そして、次の内容でルートディレクトリにsvgTransform.jsファイルを作成します

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

もちろん、これは常に同じ値を返す基本的なトランスフォーマーです。

ドキュメントへのリンク： http://facebook.github.io/jest/docs/en/configuration.html#transform-object-string-string

21
niba