Reactjs Jest意外标识符要求

我正在尝试设置Jest来测试我的应用程序的增长。我得到以下错误：

SyntaxError: Unexpected identifier

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

我正在使用、、和。 除了React，我对所有人都比较陌生

我遵循了Jest的入门教程，但我仍然得到了错误

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"
    }
  }
}

.lrc.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 };

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 };

jest.config.js

"use strict";

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

---

如何让Jest处理es6语法？

Require是用于导入变量的节点环境语法，Jest在节点中运行。有关导入/要求和节点之间差异的更多背景信息，请参见本文档

您可以使用添加对此的支持

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"],
        node: "current"
      },
      modules: false
    }
  ],
  "@babel/preset-react"
];
const plugins = ["@babel/plugin-proposal-class-properties"];

module.exports = { presets, plugins };

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 };

上述代码仍将遇到许多错误。解决这些问题的详细信息可在此处看到：