Как использовать babel-preset-env с Jest

Question

Мы находимся в процессе обновления нашего API, и Генри Чжу из Babel предупредил меня об этой предустановке под названием babel-preset-env заменить необходимость в babel-preset-es2015 а также babel-preset-es2018,

Теперь я сталкиваюсь с трудностями понимания самого простого способа справиться со всем.

• Наш API использует ноды v8.x и async/await, нативные обещания
• Я хочу спред оператора
• Я хочу, чтобы оператор трубопровода
• Я хочу импортировать / экспортировать синтаксис
• Я хочу поддержать Jest
• Мне нравится, как babel-node переносит API в память

Это будет проще, если я просто покажу вам текущую позицию нашего конфига:

.babelrc

 {
   "presets": [
     "env",
       {
         "targets": {
           "node": "current"
         }
       },
     "jest"
   ]
 }

package.json

 {
   "scripts": {
     "test": "node --harmony-async-await node_modules/jest/bin/jest.js",
     "start:local": "NODE_ENV=localhost npm run babel-node -- warpcore/server.js",
     "start": "npm run babel-node -- warpcore/server.js",
     "babel-node": "babel-node --presets=es2015,stage-2"
   },
   "dependencies": {
     "babel-polyfill": "^6.23.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
     "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2018": "^1.0.0",
     "babel-preset-stage-2": "^6.24.1",
     "jest": "^20.0.4"
   },
   "jest": {
     "testURL": "http://localhost:8080",
     "testEnvironment": "node"
   }
 }

Я не уверен, как эти вещи должны быть организованы, чтобы лучше всего достичь моего списка пули выше.

Какие изменения я должен сделать?

• Я думаю, что сценарий Babel-узла должен быть изменен
• Я подозреваю, что могу удалить некоторые из этих пакетов
• Я подозреваю .babelrc файл не оптимален

Answer 1

Я думаю, что я получил это работает. Вот решение:

.babelrc

В сообщении, опубликованном в вопросе, есть синтаксическая ошибка, поскольку предустановку env необходимо заключить в квадратные скобки [] (из: http://babeljs.io/docs/plugins/preset-env/)

Правильный:

 {
   "presets": [
     ["env",
       {
         "targets": {
           "node": "current"
         }
       }],
     "jest"
   ]
 }

package.json

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

  {
     "scripts": {
       "test": "jest --verbose",
       "start:local": "cross-env NODE_ENV=localhost babel-node -- app.js",
       "babel-node": "babel-node --presets=env"
    },
    "dependencies": {
      "babel-cli": "^6.24.1",
      "babel-preset-env": "^1.6.0"
    },
    "devDependencies": {
      "babel-eslint": "^7.2.3",
      "babel-jest": "^20.0.3",
      "jest": "^20.0.4"
    },
    "jest": {
      "testURL": "http://localhost:8080",
      "testEnvironment": "node"
    }
  }

Намного чище на мой взгляд. Вы можете модулировать пресеты из .babelrc файл, если вы хотите явно включить или исключить любой, или указать, какие браузеры поддерживать.

Answer 2

Если вы хотите использовать babel-preset-env в качестве замены для babel-preset-es2015 (что устарело) с Jest, то вы должны убедиться, что свойство " modules" в вашей конфигурации "env" установлено на "commonjs" ".

Вот примерная конфигурация:

.babelrc

{     
  "env": {
    "test": {
      "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
      ],
      "presets": [
        "jest",
        "react",
        [
          "env",
          {
            "debug": false,
            "modules": "commonjs",
            "targets": {
              "node": "current"
            },
            "useBuiltIns": true
          }
        ]
      ]
    }
  }
}

Вы можете увидеть в env.testта предустановка env (которая является конфигурацией "babel-preset-env") имеет "modules", установленные в "commonjs". Это важно, в противном случае вы получите "SyntaxError: Неожиданный импорт токена".

Для полноты вот простой тест:

ExampleButton.test.jsx

import ExampleButton from './ExampleButton';
import React from 'react';
import renderer from 'react-test-renderer';

test('Example Test', () => {
  const component = renderer.create(<ExampleButton />);
  const json = component.toJSON();
  expect(json.type).toBe('button');
});

ExampleButton.jsx

import React from 'react';

class ExampleButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.text}
      </button>
    )
  }
}

export default ExampleButton;

Для моей установки Babel я использовал следующие зависимости:

"babel-core": "6.26.0",
"babel-jest": "21.2.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"jest": "21.2.1",
"react-test-renderer": "16.1.1",

Answer 3

Вот решение, которое я нашел:

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