javascript - 在Wordpress中执行 Jest 测试时，如何修复import {}意外 token

Question

当我在wordpress / gutenberg插件中运行Jest时，出现此错误

●测试套件无法运行

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 {

似乎没有转换Story.test.js的依赖项。我已经尝试按照上述建议添加“ transformIgnorePatterns”。 Ive还尝试将一些插件导入我的babelrc.js。没运气。

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

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',
            } ],
        ],
};
}

我希望测试能够运行，但是却出现了此错误。

Answer 1

由于您正在使用Node，因此请使用require。

const { createElement } = require("@wordpress/element");