SyntaxError: Unexpected token '<' on shallow render with Enzyme and Jest in React

Question

我正在运行我的 React 应用程序中使用 jest 和 enzyme 进行测试，虽然我的简单健全性检查测试（2+2 期望 4）有效，但当我浅渲染组件时会抛出此错误.当我尝试用 render()

替换 shallow() 时它也会抛出

Projects\MyProject\__tests__\app.test.js:17
        const wrapper = (0, _enzyme.shallow)(<_App.App />);
                                             ^

    SyntaxError: Unexpected token '<'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.523 s
Ran all test suites.
error Command failed with exit code 1.

这是 app.test.js 文件：

import React from "react";
import { expect } from "chai";
import { shallow } from "enzyme";

import { App } from "../src/App";
import Header from "../src/components/header/header.component";

describe("<App />", () => {
  it("renders one Header component", () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find(Header)).to.have.lengthOf(1);
  });
});

babel.config.js:

module.exports = {
  presets: [["@babel/preset-react", { targets: { node: "current" } }]],
  plugins: ["@babel/plugin-syntax-jsx", "transform-export-extensions"],
  only: ["./**/*.jsx", "./**/*.js", "node_modules/jest-runtime"],
};

编辑：我添加了 babel-jest，现在这是错误：

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from "react";

                       ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.344 s
Ran all test suites.
error Command failed with exit code 1.

组件是 .jsx 文件类型。有没有人见过这个错误？我认为我不需要更改我的配置中的任何内容，这似乎是一个 pr

Answer 1

我找到了解决办法。有几个地方我需要正确配置。我在下面列出了它们，以供遇到此错误且没有其他答案的任何其他人使用。

设置您的 package.json 以包括这些依赖项，以及开玩笑的配置：

"devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "7.12.11",
    "@babel/preset-react": "7.12.10",
    "babel-jest": "26.6.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "chai": "^4.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "enzyme-to-json": "^3.6.1",
    "jest": "26.6.3",
    "node-sass": "4.14.1",
    "react-test-renderer": "17.0.1",
    "redux-mock-store": "^1.5.4"
  },

...other stuff---

"jest": {
    "moduleNameMapper": {
      "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }

基本测试：

// <rootdir>/__tests__/app.test.js
import React from "react";
import { assert } from "chai";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import configureMockStore from "redux-mock-store";
import { Provider } from "react-redux";

import App from "../src/App"; // Component to Test

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

const mockStore = configureMockStore();
const store = mockStore({});

describe("Test Component", () => {
  it("render correctly App component", () => {
    const AppComponent = shallow(
      <Provider store={store}>
        <App />
      </Provider>
    ).exists();
    assert(AppComponent === true);
  });
});

添加这些 styleMock 和 filemock 模块以防止 jsx 组件导入 css/scss and/or 文件时出错：

// <rootdir>/__mocks__/styleMock.js
module.exports = {};

// <rootdir>/__mocks__/fileMock.js
module.exports = "test-file-stub";

// <rootdir>/babel.config.js
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
  ],
};

‍‍ ...并且现在你应该可以运行你用jest + enzyme进行测试，在我的情况下，chai。

SyntaxError: Unexpected token '<' on shallow render with Enzyme and Jest in React

SyntaxError: Unexpected token '<' on shallow render with Enzyme and Jest in React

javascript

reactjs

jestjs

enzyme

babel-jest