Jest: тестовый набор не удалось запустить, SyntaxError: неожиданный импорт токена

Это моя настройка jest из файла package.json:

"jest": {
    "automock": false,
    "browser": true,
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.jsx?$": "./node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileTransformer.js"
    },
    "testEnvironment": "jsdom",
    "testPathDirs": [
      "./app/tests"
    ],
    "testRegex": ".*.test.js",
    "verbose": true
  }

И файл .babelrc, расположенный в моей корневой папке:

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

В соответствии с документацией, найденной на шутку начало страницы, это все, что мне нужно для того, чтобы babel работал над магией.

Независимо от того, этот тест:

import React from 'react';
import {shallow} from 'enzyme';
import Landing from '../components/Landing.component';

describe('<Landing/>', () => {
  it('should render a header to the page', () => {
    const landing = shallow(<Landing/>);
    expect(landing.find('h1').text()).toBe('This is the Landing component');
  });
});

возвращает:

Приложение/тесты FAIL/Landing.component.test.js ● Тестовый набор не удалось пробег

/Users/shooshte/PersonalProjects/surviveJS/app/tests/Landing.component.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import

Реагировать на "реагировать";                                                                                              ^^^^^^     SyntaxError: неожиданный импорт токена

  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)

Что я делаю неправильно?

Ответы

Ответ 1

Jest устанавливает переменную env для проверки, поэтому мне пришлось добавить свои пресеты в настройку env в .babelrc:

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "presets": ["es2015", "react", "stage-0"]
    }
  }
}

Ответ 2

Каждый годовой пресет только компилирует то, что было ратифицировано в этом году. babel-preset-env заменяет es2015, es2016, es2017, latest

Исходя из этого, в последних конфигурациях вы должны использовать/заменить свои плагины/пресеты es2015 и любого esX на новый: env.

  • Вы должны установить babel-preset-env с помощью npm install.
  • В .babelrc вы должны соответственно обновить:
{
  "presets": [
    "env", 
    "stage-0", 
    "react-native"
  ],
  "plugins": ...
}

Дополнительная информация о Babel plugins official Documentation.

☝️ Помните, что порядок плагинов/пресетов в массиве важен.

Ответ 3

В моем случае я имел следующий .babelrc config:

{
  "presets": [
    ["env", { "modules": false }],
    "react",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    "transform-class-properties",
    "react-hot-loader/babel"
  ]
}

Даже если был указан babel-env, я все еще получил ошибку. Чтобы исправить это, мне пришлось удалить флаг "modules": false.