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

问题描述

我在 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"],};

EDIT ：我添加了 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 total
Snapshots:   0 total
Time:        2.344 s
Ran all test suites.
error Command failed with exit code 1.

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

解决方法

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

设置您的 package.json 以包含这些依赖项和 jest 配置：

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