如何通过使用 es6 的 node_modules 设置玩笑
How to setup jest with node_modules that use es6
我有一个很简单的测试:
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
我有这个 .babelrc:
{
"presets": ["@babel/react", "@babel/env"]
}
如何通过简单的测试?
您可以通过两种方式通过此测试:
选项 1。) 通过添加测试 env
选项设置您的 babel 配置以处理 ES6 导入(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.) 在您的 webpack.config.js
配置中将 ES6 模块转换为 ES5 语法:
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,
},
},
...
],
}
...
}
这两个选项的主要区别在于第一个选项仅适用于测试环境。如果您尝试在 development/production 环境中使用它,它 可能 影响其他第 3 方包并导致编译错误。因此,如果您打算将此迁移到支持 IE11 及以下版本的生产环境中,那么建议使用第二种方案。但是,请记住,每次创建生产构建时都会转换包 and/or 测试套件是 运行。因此,如果您正在处理一个非常大的项目(或转译多个 ES6 包),它可能会占用大量资源。因此,我建议将 3rd 方包从 ES6 编译到 ES5 并在本地或私下安装 it/them(通过 NPM 包)。
工作示例(此示例包括第二个选项):
https://github.com/mattcarlotta/transpile-es6-module
要安装:
cd ~/Desktop && git clone git@github.com:mattcarlotta/transpile-es6-module.git
cd transpile-es6-module
yarn install
yarn dev
到 运行 演示
yarn test
到 运行 测试套件
马特的回答被采纳b/c它很有见地。为我所做的更改是添加 package.json:
"jest": {
...
"transformIgnorePatterns": [
"node_modules/(?!@atlaskit)"
],
您可以一次添加对多个包的支持,方法是用 |
分隔它们
"jest": {
...
"transformIgnorePatterns": [
"node_modules/(?!module1|module2|etc)"
],
我有一个很简单的测试:
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
我有这个 .babelrc:
{
"presets": ["@babel/react", "@babel/env"]
}
如何通过简单的测试?
您可以通过两种方式通过此测试:
选项 1。) 通过添加测试 env
选项设置您的 babel 配置以处理 ES6 导入(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.) 在您的 webpack.config.js
配置中将 ES6 模块转换为 ES5 语法:
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,
},
},
...
],
}
...
}
这两个选项的主要区别在于第一个选项仅适用于测试环境。如果您尝试在 development/production 环境中使用它,它 可能 影响其他第 3 方包并导致编译错误。因此,如果您打算将此迁移到支持 IE11 及以下版本的生产环境中,那么建议使用第二种方案。但是,请记住,每次创建生产构建时都会转换包 and/or 测试套件是 运行。因此,如果您正在处理一个非常大的项目(或转译多个 ES6 包),它可能会占用大量资源。因此,我建议将 3rd 方包从 ES6 编译到 ES5 并在本地或私下安装 it/them(通过 NPM 包)。
工作示例(此示例包括第二个选项): https://github.com/mattcarlotta/transpile-es6-module
要安装:
cd ~/Desktop && git clone git@github.com:mattcarlotta/transpile-es6-module.git
cd transpile-es6-module
yarn install
yarn dev
到 运行 演示yarn test
到 运行 测试套件
马特的回答被采纳b/c它很有见地。为我所做的更改是添加 package.json:
"jest": {
...
"transformIgnorePatterns": [
"node_modules/(?!@atlaskit)"
],
您可以一次添加对多个包的支持,方法是用 |
"jest": {
...
"transformIgnorePatterns": [
"node_modules/(?!module1|module2|etc)"
],