Javascript 如何修复错误&语法错误：不能在纯react 项目中JEST引发的模块&之外使用导入语句

我正在学习使用其中一门Udemy课程中的RTL和Jest来测试Reaction项目.讲师提供了一个纯粹的react 项目.在视频中，教师的测试通过了，但同样的代码对我来说是失败的，Jest抛出了错误"SyntaxError: Cannot use import statement outside a module".

我在谷歌上搜索，try 了几个解决方案，比如transformIgnorePatterns: [100]，添加了"type": "module" in package.json和mock axios using Jest，但都没有对我起作用.

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

Test File With 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);
  }
});

Test File Without Mock As Per The Course Video个

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);
  }
});

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