Как настроить jest с помощью node_modules, которые используют es6 - PullRequest
Новая
       107

Как настроить jest с помощью node_modules, которые используют es6

0 голосов
/ 17 марта 2020

У меня очень простой тест: 

describe('sanity', () => {
  it('sanity', () => {
    expect(true).toBeTruthy()
  })
})

И я получаю следующую ошибку: 

 FAIL  spec/javascript/sanity_test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/piousbox/projects/ruby/<project>/node_modules/@atlaskit/tooltip/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default } from './components/Tooltip';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      3 | import update from "immutability-helper";
      4 | import {components} from "react-select-2";
    > 5 | import Tooltip from "@atlaskit/tooltip";
        | ^
      6 | const isEqual = require("react-fast-compare");
      7 | import _, {replace} from "lodash";
      8 | import { get } from "$shared/request";

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (app/javascript/customer2/components/fob/fob_utils.js:5:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.593s

У меня есть .babelr c: 

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

Как мне пройти тривиальный тест?

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Ответ Мэтта принят b / c Это проницательно. Изменения, которые сделали это для меня, были добавлены в пакет. json: 

  "jest": {
    ...
    "transformIgnorePatterns": [
      "node_modules/(?!@atlaskit)"
    ],
0 голосов
/ 17 марта 2020

Вы можете пройти этот тест двумя способами:

Вариант 1.) Настройте конфигурацию babel для обработки импорта ES6, добавив параметр тестирования env (флаг среды testing) будет определен в ваших package.json сценариях, например: "test": "NODE_ENV=testing jest" или "test": "BABEL_ENV=testing jest") ...

babel.config. js

module.exports = api => {
  api.cache(true);

  return {
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: [
      "@babel/plugin-transform-runtime",
      ["@babel/plugin-proposal-class-properties", { loose: true }],
    ],
    env: {
      testing: {
        presets: [
          [ "@babel/preset-env", { targets: { node: "current" }}],
        ],
      },
    },
  };
};

Вариант 2.) Переведите модуль ES6 в синтаксис ES5 в вашей конфигурации webpack.config.js:

webpack.config. js

const { NODE_ENV } = process.env
const inDevelopment = NODE_ENV === "development";

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        exclude: !inDevelopment ? /node_modules\/(?!(@atlaskit\/tooltip))/ : /(node_modules)/,
        options: {
          cacheDirectory: inDevelopment,
          cacheCompression: false,
        },
      },
      ...
    ],
  }
  ...
}

Основное различие между этими двумя вариантами заключается в том, что первый вариант будет работать только в среде тестирования. Если вы попытаетесь использовать его в среде разработки / производства, может повлиять на другие сторонние пакеты и вызвать ошибки компиляции. Поэтому, если вы планируете перенести это в производственную среду, которая поддерживает IE11 и ниже, рекомендуется второй вариант. ОДНАКО помните, что это будет переносить пакет при каждом создании производственной сборки и / или запуске набора тестов. Поэтому, если вы работаете над очень большим проектом (или переносите несколько пакетов ES6), он может быть достаточно ресурсоемким. Поэтому я бы рекомендовал скомпилировать пакеты сторонних производителей из ES6 в ES5 и установить их / их локально или в частном порядке (через пакет NPM).

Рабочий пример (этот пример включает в себя второй вариант) ): https://github.com/mattcarlotta/transpile-es6-module

Для установки:

  1. cd ~/Desktop && git clone git@github.com:mattcarlotta/transpile-es6-module.git
  2. cd transpile-es6-module
  3. yarn install
  4. yarn dev для запуска демо
  5. yarn test для запуска тестовых наборов
...