React 中的 axios “无法在模块外部使用 import 语句”

Question

我在 React 应用程序中使用 axios 以及 MUI 进行样式设置。我在开发时没有错误，但现在当我开始使用我的 React 应用程序编写测试时react testing library，jest我收到 axios 模块错误，如下所示。我查阅了很多文章，很可能是因为 axios 将模块类型从 CommonJS 更改为 ECMAScript。我尝试在 React 中修改Vue.js 的这个解决方案，但我做不到。

\n

 FAIL  src/components/user/Contact.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here\'s what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n    D:\\Programs\\VS Code\\Web Development\\lmsfrontend\\node_modules\\axios\\index.js:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from \'./lib/axios.js\';\n\n          ^^^^^^\n\n    SyntaxError: Cannot use import statement outside a module\n\n    > 1 | import axios from "axios";\n        | ^\n      2 |\n      3 | const API_URL = "https://librarymngsys.adaptable.app/api/user";   \n      4 |\n\n      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)\n      at Object.<anonymous> (src/features/user/userService.js:1:1)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        1.254 s\nRan all test suites related to changed files.\n

\n

以下是我的测试：

\n

import { render, screen } from "@testing-library/react";\nimport Contact from "./Contact";\ndescribe("Contact", () => {\n  test("renders correctly", () => {\n    render(<Contact />);\n    const inputElem = screen.getByLabelText(/Name/)\n    expect(inputElem).toBeInTheDocument();\n  });\n});\n

\n

以下是我正在为其编写测试的组件中的文本字段：\n注意：我没有为第二个字段编写测试，因为第一个字段本身给出了错误

\n

const Contact = () => {\n    // code \n    return (\n        <Box>\n            <Box><Typography variant="h2" sx={{ textAlign: \'center\' }}>Contact Us</Typography></Box>\n            <Card sx={{ minHeight: \'77vh\', boxShadow: \'1px 2px #3f48f2\' }}>\n                <Box sx={{ m: 1 }}>\n                    <TextField\n                        required\n                        fullWidth\n                        id="contact-name"\n                        label="Name"\n                        name="name"\n                        value={values.name}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        helperText={errors.name && touched.name ? errors.name : null}\n                        error={errors.name && touched.name}\n                    />\n                </Box>\n                <Box sx={{ m: 1 }}>\n                    <TextField\n                        required\n                        fullWidth\n                        id="contact-mail"\n                        label="E-Mail ID"\n                        name="mail"\n                        value={values.mail}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        helperText={errors.mail && touched.mail ? errors.mail : null}\n                        error={errors.mail && touched.mail}\n                    />\n                </Box>\n            </Card>\n        </Box>\n    )\n}\n\nexport default Contact\n

\n

我经历了某些解决方案，但无法纠正它。提前致谢。

\n

Answer 1

对于那些在 2023 年在 Jest 中运行测试时仍然遇到此错误的人。它主要发生在您使用 CRA 创建 React 项目时。CRA 将获取文件中的配置，package.json而不是使用文件中的配置jest.config.js。这是参考：https://create-react-app.dev/docs/running-tests/#configuration

我修复此错误的方法是使用craco弹出 React 应用程序。这是我让它工作的配置。

jest: {
    configure: {
      moduleNameMapper: { '^axios$': 'axios/dist/node/axios.cjs' },
    },
  },

我的jest和axios版本：

• axios@1.4.0
• 笑话@27.5.1

Answer 2

为了解决这个问题，我将 package.json 中的测试命令更新为"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!axios)/'",：此错误是因为 axios 在 v1.xx 及更高版本中将其模块类型从 CommonJS 更改为 ECMAScript。