web-dev-qa-db-ja.com

ts-jestはes6インポートを認識しません

反応するコードベースにTypeScriptサポートを追加していますが、アプリが正常に動作している間、jestテストはどこでも失敗し、明らかにes6構文に関する何かを認識していません。

このために ts-jest を使用しています。以下は、jestのテストセットアップファイルを処理しようとしたときにすぐに表示されるエラーメッセージです。

 FAIL  src/data/reducers/reducers.test.js
  ● Test suite failed to run

    /Users/ernesto/code/app/react/setupTests.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './polyfills';
                                                                                                    ^^^^^^^^^^^^^

    SyntaxError: Unexpected string

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

単純なimport './polyfills'を認識できず、引用符で囲まれた文字列は予期しないものであると言います。

これらは私の設定です：

package.jsonのjest config

"jest": {
  "setupTestFrameworkScriptFile": "<rootDir>/app/react/setupTests.js",
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ]
},

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "skipDefaultLibCheck": true,
    "strictPropertyInitialization": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noErrorTruncation": true
  },
  "exclude": ["app/assets","node_modules", "vendor", "public"],
  "compileOnSave": false
}

.babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react",
    "es2015"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

関連する場合、これはReactコードベースでRailsアプリ内で使用され、そのために Rails/webpacker を使用しています。 TypeScriptのサポートを追加する指示 に従いましたが、このjest部分はカバーしていませんが、それは魅力のように機能しました。

typescriptbabeljsjestjses6-modules
17
Ernesto

私は最終的に問題が何であるかを見つけました。 ts-jestのREADMEに常にあったことが判明しました。

READMEには JavascriptファイルでのES2015 +機能の使用 というタイトルのセクションがあります。これらの場合、.jsファイルの変換としてbabel-jestを使用するようにjestに指示する必要があります。

"jest": {
  "transform": {
    "^.+\\.jsx?$": "babel-jest", // Adding this line solved the issue
    "^.+\\.tsx?$": "ts-jest"
  },
  // ...
},
13
Ernesto

見つかったドキュメント が示すように、ts-jestはCommonJSモジュールを必要とするため、メインtsconfig.jsonが"module": "es6"を設定するため、別個のtsconfig.jsonを作成する必要があります。メインtsconfig.jsonを拡張し、"module": "commonjs"を設定するts-jestのファイル。

0
Matt McCutchen