web-dev-qa-db-fra.com

ts-jest ne reconnaît pas les importations es6

J'ajoute la prise en charge de TypeScript à une base de code de réaction et, tant que l'application fonctionne correctement, les tests de plaisanterie échouent de part en part, ne reconnaissant apparemment pas la syntaxe es6.

Nous utilisons ts-jest pour cela. Vous trouverez ci-dessous le message d'erreur que je reçois dès le départ en essayant de traiter le fichier d'installation des tests de 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)

Il ne parvient pas à reconnaître un simple import './polyfills', en disant que la chaîne entre guillemets est inattendue.

Ce sont mes paramètres:

jest config dans package.json

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

S'il y a lieu, il s'agit d'une base de code React utilisée dans une application Rails, et nous utilisons à cette fin Rails/webpacker . Nous avons suivi leurs instructions pour y ajouter le support TypeScript , et cela a fonctionné comme un charme, sauf pour cette partie de plaisanterie, qu’ils ne couvrent pas.

typescriptbabeljsjestjses6-modules
5
Ernesto

J'ai finalement découvert quel était le problème. Il s'avère qu'il était tout le temps dans README de ts-jest.

Il y a une section dans le fichier README intitulée Utilisation des fonctionnalités ES2015 + dans les fichiers Javascript . Dans ces cas, vous devez indiquer à jest d'utiliser babel-jest en tant que transformation des fichiers .js.

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

En tant que la documentation que vous avez trouvée dit, ts-jest nécessite des modules CommonJS. Par conséquent, puisque votre tsconfig.json définit "module": "es6", vous devez créer un fichier tsconfig.json séparé pour ts-jest qui étend votre tsconfig.json principal et définit "module": "commonjs".

0
Matt McCutchen