SyntaxError：在 React 中使用 Enzyme 和 Jest 进行浅层渲染时出现意外标记“<”

Question

我在我的 React 应用程序中使用 jest 和酶运行测试，虽然我的简单完整性检查测试（2+2 期望 4）有效，但当我去浅层渲染组件时会引发此错误。当我尝试将 shallow() 替换为 render() 时，它也会抛出

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 文件类型。有没有人见过这个错误？我认为我不需要更改配置中的任何内容，这似乎是一个公关

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 和/或文件时出错：

// <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 + 酶来运行你的测试了，在我的例子中是 chai。