[英]How to use babel-preset-env with Jest
我们正在更新我们的API,来自Babel的Henry Zhu提醒我这个名为babel-preset-env
以取代babel-preset-es2015
和babel-preset-es2018
。
现在,我遇到了理解处理一切的最简单方法的困难。
如果我只是向您展示我们的配置的当前位置,这将更容易:
.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"
}
}
我不确定如何组织这些事情以最好地实现上面的子弹列表。
我应该做些什么改变?
.babelrc
文件不是最佳的 如果你想使用babel-preset-env替换使用Jest的babel-preset-es2015 (已弃用),那么你必须确保“env”配置中的“ modules ”属性设置为“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:Unexpected token import”。
为了完整起见,这是一个简单的测试:
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",
我想我搞定了。 这是解决方案:
.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
文件中的预设,或指定要支持的浏览器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.