如何修复纯 React 项目中 jest 抛出的错误“SyntaxError: Cannot use import statements Outside a module”？

Question

我正在学习使用 Udemy 课程之一中的 RTL 和 Jest 来测试 React 项目。讲师提供了一个纯React项目。在视频中，讲师的测试通过了，但相同的代码对我来说失败了，Jest 抛出错误“SyntaxError：无法在模块外使用 import 语句”。

我在google上进行了研究，并尝试了一些解决方案，例如transformIgnorePatterns：[

/node_modules/(?!axios)

]，在package.json中添加“type”：“module”，以及使用Jest模拟axios，但它们都不适合我。

package.json

 {
  "name": "codesplain",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",
  "dependencies": {
    "@exuanbo/file-icons-js": "^3.3.0",
    "@monaco-editor/react": "^4.4.6",
    "@playwright/test": "^1.28.1",
    "@primer/octicons-react": "^17.9.0",
    "@prisma/client": "^4.7.0",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.7",
    "classnames": "^2.3.2",
    "concurrently": "^7.6.0",
    "cookie-session": "^2.0.0",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "msw": "^0.49.2",
    "nodemon": "^3.0.3",
    "playwright": "^1.28.1",
    "prisma": "^4.7.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.4.4",
    "react-router-dom": "^6.4.4",
    "react-scripts": "^5.0.1",
    "react-split": "^2.0.14",
    "swr": "^2.0.0",
    "validate.js": "^0.13.1",
    "web-vitals": "^2.1.4"
  },
  "prisma": {
    "schema": "server/prisma/schema.prisma"
  },
  "scripts": {
    "start": "concurrently \"npm:start:server\" \"npm:start:client\"",
    "start:client": "react-scripts start",
    "start:server": "nodemon --watch server server/index.mjs",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"
  }
}

使用 Mock Axios With Jest 测试文件

import { render, screen } from "@testing-library/react";
import { setupServer } from "msw/node";
import { rest } from "msw";
import { MemoryRouter } from "react-router-dom";
import HomeRoute from "./HomeRoute";
import axios from "axios";

jest.mock("axios");
const mockedAxios = axios;

const handlers = [
  mockedAxios.get("/api/repositories", (req, res, ctx) => {
    const language = req.url.searchParams.get("q").split("language:")[1];

    return res(
      ctx.json({
        items: [
          { id: 1, full_name: `${language}_one` },
          { id: 2, full_name: `${language}_two` },
        ],
      })
    );
  }),
];

const server = setupServer(...handlers);

beforeAll(() => {
  server.listen();
});

afterEach(() => {
  server.resetHandlers();
});

afterAll(() => {
  server.close();
});

test("renders two links for each language", async () => {
  render(
    <MemoryRouter>
      <HomeRoute />
    </MemoryRouter>
  );

  const languages = [
    "javascript",
    "typescript",
  ];

  for (let language of languages) {
    const links = await screen.findAllByRole("link", {
      name: new RegExp(`${language}_`),
    });

    expect(links).toHaveLength(2);
  }
});

根据课程视频在没有模拟的情况下测试文件

import { render, screen } from "@testing-library/react";
import { setupServer } from "msw/node";
import { rest } from "msw";
import { MemoryRouter } from "react-router-dom";
import HomeRoute from "./HomeRoute";

const handlers = [
  rest.get("/api/repositories", (req, res, ctx) => {
    const language = req.url.searchParams.get("q").split("language:")[1];

    return res(
      ctx.json({
        items: [
          { id: 1, full_name: `${language}_one` },
          { id: 2, full_name: `${language}_two` },
        ],
      })
    );
  }),
];

const server = setupServer(...handlers);

beforeAll(() => {
  server.listen();
});

afterEach(() => {
  server.resetHandlers();
});

afterAll(() => {
  server.close();
});

test("renders two links for each language", async () => {
  render(
    <MemoryRouter>
      <HomeRoute />
    </MemoryRouter>
  );

  const languages = [
    "javascript",
    "typescript",
  ];

  for (let language of languages) {
    const links = await screen.findAllByRole("link", {
      name: new RegExp(`${language}_`),
    });

    expect(links).toHaveLength(2);
  }
});

关于如何修复此错误有什么建议吗？

Answer 1

如果您查看

node_modules/axios，您可以检查 index.js 文件并看到：

import axios from './lib/axios.js'; 这会导致该问题，节点无法识别该导入语法。

尝试使用它 -

https://github.com/axios/axios/issues/5101#issuecomment-1296024311。这将强制 jest 导入与 node.js 兼容的 axios 版本。