TS-JEST не признает импорт ES6

Я добавляю поддержку машинописи в реагирующую кодовую базу, и пока приложение работает нормально, шутливые тесты не проходят повсеместно, очевидно, что-то не распознавая синтаксис 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', сказав, что указанная строка является неожиданной.

Это мои настройки:

jest config в 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
      }
    ]
  ]
}

Если это уместно, это кодовая база React, используемая в приложении rails, и мы используем rails / webpacker для этого. Мы следовали их инструкциям, чтобы добавить поддержку TypeScript, и это работало как шарм, за исключением этой забавной части, которую они не охватывают.

Источник

4 ответа

Решение

В конце концов я выяснил, в чем проблема. Оказывается, это было в README ts-jest все время.

В README есть раздел " Использование функций ES2015+" в файлах Javascript. В этих случаях вам нужно указать шутку, чтобы использовать babel-jest в качестве преобразования для файлов.js.

"jest": {
  "transform": {
    "^.+\\.jsx?$": "babel-jest", // Adding this line solved the issue
    "^.+\\.tsx?$": "ts-jest"
  },
  // ...
},
Источник

Ключом для меня было осознание того, что тесты также должны быть преобразованы в машинописный текст!!!

Мне не удалось найти конфигурацию, которая работала бы с сохранением тестов js, но преобразование тестов в ts исправляет эту ошибку, например

mv tests/stuff.test.js tests/stuff.test.ts

Преимущество ts-jest в целом заключается в возможности проводить тесты ts, так что в любом случае это хорошо.

Источник

Как видно из документации, для ts-jest требуются модули CommonJS, так как ваш основной tsconfig.json наборы "module": "es6"вам нужно будет создать отдельный tsconfig.json файл для ts-jest, расширяющий ваш основной tsconfig.json и устанавливает "module": "commonjs",

Источник

Если вы используете create-Reaction-app, попробуйте это:

Несмотря на то, что create-реакции-приложение поставляется с предварительно настроенными настройками, нам все равно пришлось добавить пользовательскую конфигурацию, поскольку наше приложение изначально не создавалось с помощью cra. Я установил некоторые новые зависимости dev:

"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",

А также обновил .babelrc (создайте этот файл, если он не существует):

{
"presets": [
    "@babel/preset-env",
    "@babel/preset-react"
      ]
}

А теперь и jest, и npm test работают как надо.

Источник
Другие вопросы по тегам