如何用Jest使用babel-preset-env

我们正在更新我们的API，而Babel的Henry Zhu提醒我这个预设名为babel-preset-env以取代对babel-preset-es2015和babel-preset-es2018 。

现在，我很难理解处理所有事情的最简单方法。

• 我们的API使用节点v8.x和asynchronous/等待，原生承诺
• 我想传播运营商
• 我想pipe道运营商
• 我想要导入/导出语法
• 我想支持Jest
• 我喜欢babel-node如何将API传输到内存中

如果我只是告诉你我们的configuration的当前位置，这将更容易：

.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-node脚本需要改变
• 我怀疑我可以删除一些这些软件包
• 我怀疑.babelrc文件不是最佳的

Answer 1

我觉得我的工作。 这是解决scheme：

.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-envreplaceJest的babel-preset-es2015 （已弃用），那么你必须确保你的“env”configuration中的“ modules ”属性设置为“commonjs ”。

以下是一个示例configuration：

.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”configuration）的“modules”设置为“commonjs”。 这很重要，否则你会得到“SyntaxError：意外的令牌导入”。

为了完整性，这里是一个简单的testing：

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",