Question

我正在尝试在我的React项目中设置测试环境，并在设置笑话和酶时遇到问题。添加我的代码文件以供参考。

以下是我的代码：

package.json

"scripts": {
    "test": "jest"
  },
  "jest": {
    "verbose": true,
    "testURL": "http://localhost/",
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "setupFiles": [
      "./jest.config.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },
  "dependencies": {
    "html-webpack-plugin": "3.2.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "5.0.7",
    "redux": "^4.0.0",
    "save": "^2.3.2",
    "webpack": "^4.16.5"
  },
  "devDependencies": {
    "babel-cli": "^6.16.0",
    "babel-core": "^6.2.1",
    "babel-jest": "^23.4.2",
    "babel-loader": "7.1.5",
    "babel-preset-react": "^6.1.18",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-1": "^6.24.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
    "jest": "^23.4.2",
    "react-test-renderer": "16.4.2",
    "enzyme": "3.4.1",
    "enzyme-adapter-react-16": "1.2.0",
    "enzyme-to-json": "3.3.4"
  }

jest.config.js

import { shallow, render, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

global.shallow = shallow;
global.render = render;
global.mount = mount;

.babelrc

{
  "presets": ["react", "env", "stage-1"]
}

运行npm运行测试时，我遇到以下问题：

import { shallow, render, mount, configure } from 'enzyme';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)

请让我知道是否有人遇到类似问题并找到了解决方案。

Answer 1

Jest正在寻找jest.config.js，以按照here的概述检查默认配置。

因此，它尝试将您的代码解析为配置，并且玩笑本身在普通节点环境中运行，因此它尚不了解import, export语法。

最简单的解决方法是为您的jest.config.js命名为setupTests.js。

希望有帮助。

更新：（根据评论的要求，提供更深入的答案）

所以让我们跟踪错误：

最初，jest tries取决于您是否使用--config参数来先检测主配置路径。

为此，由于您未提供--config选项，因此默认情况下会先检查是否有默认的jest.config.js或其他package.json来尝试获取{{ 1}}属性。

但是，由于您有一个jest文件，因此可以检测到first，并且 read会很容易爆炸，并且由于它不是jest.config.js文件，因此您不会得到一个漂亮的错误，相反，您会将该错误按原样再次抛出到stdout中。这就是您在屏幕上看到的。

这意味着，在此阶段，该配置被检测为JSON，因此jest.config.js的配置被完全忽略了，即使它没有爆炸也仍然会丢失整个配置在package.json中。

因此，如您所见，这在许多级别上都是错误的，并且解决该问题并使标准流程正常工作的唯一方法是不使用package.json而是使用任何其他文件名。

Answer 2

npm安装酶酶适配器反应16酶到json-保存开发

React，Jest和Enzyme设置错误

2 个答案:

更新：（根据评论的要求，提供更深入的答案）

所以让我们跟踪错误：