[英]How to fix import {} unexpected token when running jest tests in wordpress
When I run Jest in my wordpress/gutenberg plugin, I get this error 当我在wordpress / gutenberg插件中运行Jest时,出现此错误
● 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:
/Applications/MAMP/htdocs/brandpop/wp-content/plugins/brandpop/blocks/story/components/Story.test.js:17
import { createElement } from "@wordpress/element";
^
SyntaxError: Unexpected token {
It appears that a dependency of Story.test.js is not being transpiled. 似乎没有转换Story.test.js的依赖项。 I've tried adding a "transformIgnorePatterns" as suggested above. 我已经尝试按照上述建议添加“ transformIgnorePatterns”。 Ive also tried importing some plugins into my babelrc.js. Ive还尝试将一些插件导入我的babelrc.js。 No luck. 没运气。
package.json 的package.json
{
"scripts": {
"test": "jest"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-destructuring": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@wordpress/babel-plugin-makepot": "^2.1.2",
"@wordpress/babel-preset-default": "^4.2.0",
"@wordpress/jest-preset-default": "^4.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.6",
"chai": "^4.2.0",
"classnames": "^2.2.6",
"cross-env": "^5.1.5",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"esm": "^3.2.25",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.12.0",
"postcss-loader": "^2.1.5",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.7",
"snap-shot-it": "^6.3.5",
"style-loader": "^0.19.1",
"webpack": "^3.11.0"
},
"dependencies": {
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"@vimeo/player": "^2.9.1",
"@wordpress/babel-plugin-import-jsx-pragma": "^2.2.0",
"@wordpress/compose": "^3.3.0",
"@wordpress/element": "^2.4.0",
"@wordpress/is-shallow-equal": "^1.3.0",
"babel-jest": "^24.8.0",
"babel-plugin-transform-imports": "^1.5.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.2",
"jest": "^24.8.0",
"mocha": "^6.1.4",
"react-html-parser": "^2.0.2",
"react-images": "^0.5.19",
"react-moment": "^0.9.2",
"react-photo-gallery": "^6.3.4",
"react-test-renderer": "^16.8.6",
"selenium-webdriver": "^4.0.0-alpha.1",
"uniqid": "^5.0.3"
},
"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(s?css|less)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"transform": {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.js?$": "babel-jest",
"^.+\\.json?$": "babel-jest"
},
"testPathIgnorePatterns": [
"/node_modules/"
]
}
}
.babelrc.js .babelrc.js
module.exports = {
presets: [
"@wordpress/default",
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"modules": "commonjs"
}
],
"@babel/preset-react"
],
plugins: [
[ '@wordpress/babel-plugin-import-jsx-pragma', {
scopeVariable: 'createElement',
scopeVariableFrag: 'Fragment',
source: '@wordpress/element',
isDefault: false,
} ],
[ '@babel/transform-react-jsx', {
pragma: 'createElement',
pragmaFrag: 'Fragment',
} ],
],
};
}
I expected tests to run, but instead I got this error. 我希望测试能够运行,但是却出现了此错误。
由于您正在使用Node,因此请使用require
。
const { createElement } = require("@wordpress/element");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.