Jest测试Create React App遇Swiper的export语法错误

我用create-react-app搭建了集成Swiper和TypeScript的天气应用，运行Jest测试时终端报错，错误源自swiper/react模块，具体错误信息如下：

Jest encountered an unexpected token

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.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

D:\Coding\Projects\Website portfolio\weather-app-react\node_modules\swiper\react\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from './swiper-react.js';
                                                                                      ^^^^^^

SyntaxError: Unexpected token 'export'

  2 | import { Box, Stack, Typography, Button, useMediaQuery } from "@mui/material";
  3 | import { useTheme } from "@mui/material/styles";
> 4 | import { Swiper, SwiperSlide } from "swiper/react";
    | ^
  5 | import { Mousewheel } from "swiper";
  6 | import { CurrentWeatherType, ButtonDaysPerViewEnum } from "../types";
  7 | import MobileView from "./MobileView";

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
  at Object.<anonymous> (src/pages/MainPage.tsx:4:1)

我的package.json内容如下：

{
  "name": "weather-app-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@hookform/resolvers": "^3.0.1",
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.15",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.23",
    "@types/react": "^18.0.31",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.9",
    "react-responsive": "^9.0.2",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.8",
    "swiper": "^9.2.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4",
    "yup": "^1.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "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"
    ]
  }
}

解决方案 #

问题根源是Jest默认忽略node_modules目录下文件的转译，但Swiper v9及以上版本发布的是未转译的ES模块，Jest无法识别其中的export语法。需要配置Jest对Swiper及其依赖的包进行转译：

方法1：在package.json中添加Jest配置 #

在package.json末尾添加jest字段：

"jest": {
  "transformIgnorePatterns": [
    "node_modules/(?!swiper|ssr-window|dom7)"
  ]
}

方法2：创建独立的Jest配置文件 #

在项目根目录新建jest.config.js文件，写入以下内容：

module.exports = {
  transformIgnorePatterns: [
    'node_modules/(?!swiper|ssr-window|dom7)'
  ]
};

配置中的(?!swiper|ssr-window|dom7)表示排除这三个包，让Jest对它们进行转译——因为Swiper依赖ssr-window和dom7，这两个包同样是ES模块格式。

修改完成后重新运行Jest测试即可解决该错误。

内容的提问来源于stack exchange，提问作者Seva Sleva