reactjs - 开 Jest ，需要意外的标识符

Question

我正在尝试设置 Jest 来测试我的应用程序的发展。我收到以下错误:

SyntaxError: Unexpected identifier

> 1 | const screenSize = require("../src/index.js").screenSize;
    |                    ^

我正在使用Phaser 3 , Webpack , Babel ，和 React 。 除了 React 之外，我对所有其他方面都比较陌生。

我遵循了 Jest 的入门教程和 using with webpack tutorial ，但我仍然收到错误。

package.json

{
  "name": "phaser3-project-template",
  "version": "1.1.0",
  "description": "A Phaser 3 Project Template",
  "main": "src/index.js",
  "scripts": {
    "build": "webpack --config webpack/prod.js ",
    "start": "webpack-dev-server --config webpack/base.js --open",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/photonstorm/phaser3-project-template.git"
  },
  "author": "Richard Davey <rdavey@gmail.com> (http://www.photonstorm.com)",
  "license": "MIT",
  "licenseUrl": "http://www.opensource.org/licenses/mit-license.php",
  "bugs": {
    "url": "https://github.com/photonstorm/phaser3-project-template/issues"
  },
  "homepage": "https://github.com/photonstorm/phaser3-project-template#readme",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.7.1",
    "path": "^0.12.7",
    "raw-loader": "^1.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "terser-webpack-plugin": "^1.2.1",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.2.1"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.1",
    "phaser": "^3.16.2",
    "react-redux": "^7.0.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "style-loader": "^0.23.1"
  },
  "jest": {
    "modulePaths": [
      "node_modules"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    }
  }
}

webpack/base.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  entry: "./src/index.js", //do we need this?
  output: {
    path: path.resolve("dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: [/\.vert$/, /\.frag$/],
        use: "raw-loader"
      },
      {
        test: /\.(gif|png|jpe?g|svg|xml)$/i,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"], {
      root: path.resolve(__dirname, "../")
    }),
    new webpack.DefinePlugin({
      CANVAS_RENDERER: JSON.stringify(true),
      WEBGL_RENDERER: JSON.stringify(true)
    }),
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
      inject: "body"
    })
  ]
};

.babelrc.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        browsers: [">0.25%", "not ie 11", "not op_mini all"],
        node: "current"
      },
      modules: false
    }
  ],
  "@babel/preset-react"
];
const plugins = ["@babel/plugin-proposal-class-properties"];

module.exports = { presets, plugins };

jest.config.js

"use strict";

module.exports = {
    testMatch: ["<rootDir>/**/*.test.js"],
    testPathIgnorePatterns: ["/src/", "node_modules"]
};

index.test.js

const screenSize = require("../src/index.js").screenSize;
//import toBeType from "jest-tobetype";

console.log(screenSize);

test("screenSize is an object", () => {
  expect(typeof screenSize).toBe("object");
});

Github Repo

如何让 Jest 处理 es6 语法？

Answer 1

Require 是用于导入变量的 Node 环境语法，Jest 运行在 Node 中。有关 import/require 和 Node 之间差异的更多背​​景信息可以在 SO question 中看到。

您可以使用

添加对此的支持

npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-transform-modules-commonjs

并将它们作为预设包含在 babelrc.js 中

const presets = [
  [
    "@babel/env",
    {
      targets: {
        browsers: [">0.25%", "not ie 11", "not op_mini all"]
      },
      modules: false
    }
  ],
  "@babel/preset-react"
];
const plugins = [
  "@babel/plugin-proposal-class-properties",
  "@babel/plugin-transform-modules-commonjs"
];
module.exports = { presets, plugins };

上面的代码仍然会遇到许多错误，解决这些错误的详细信息可以在这里看到:https://medium.com/@Tnodes/setting-up-jest-with-react-and-phaser-422b174ec87e