在我的 React 项目中运行 Jest 测试时，我遇到了 `SyntaxError: Unexpected token 'export'`

Question

我在 React 应用程序的 Jest 测试中遇到 SyntaxError: Unexpected token 'export' error，正在寻求解决方案来解决 Jest 中的此配置问题。

 SyntaxError: Unexpected token 'export'

      3 | import Button from "react-bootstrap/Button";
      4 | import { AiOutlineDownload } from "react-icons/ai";
    > 5 | import { Document, Page, pdfjs } from "react-pdf";
        | ^
      6 | import "react-pdf/dist/esm/Page/AnnotationLayer.css";
      7 | import pdf from "@src/Assets/____.pdf";
      8 | pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`;

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (node_modules/react-pdf/dist/cjs/index.js:30:28)
      at Object.<anonymous> (src/components/Resum/ResumNew.js:5:1)
      at Object.<anonymous> (src/App.js:9:1)
      at Object.<anonymous> (src/App.test.js:2:1)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)

App.test.js 文件

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

我的package.json文件

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^7.1.0",
    "@react-pdf/renderer": "^3.4.4",
    "@react-spring/parallax": "^9.7.3",
    "@testing-library/dom": "^10.3.0",
    "@testing-library/jest-dom": "^6.4.5",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.2",
    "axios": "^1.7.2",
    "bootstrap": "^5.3.3",
    "framer-motion": "^11.2.10",
    "memfs": "^4.9.3",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.2",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.1",
    "react-parallax-tilt": "^1.7.227",
    "react-pdf": "^9.0.0",
    "react-responsive": "^10.0.0",
    "react-router-dom": "^6.23.1",
    "react-scripts": "5.0.1",
    "react-vertical-timeline-component": "^3.6.0",
    "typewriter-effect": "^2.21.0",
    "web-vitals": "^4.1.0"
  },
  "scripts": {
    "start": "craco start --host 0.0.0.0",
    "build": "craco build",
    "test": "craco 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/core": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "@babel/preset-react": "^7.24.7",
    "babel-jest": "^29.7.0",
    "babel-plugin-module-resolver": "^5.0.2"
  },
  "transform": {
    "\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleNameMapper": {
      "^@src/(.*)$": "<rootDir>/src/$1"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(node_modules/react-pdf|node_modules/pdfjs-dist)/)"
    ]
  }
}

jest.config.js

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest'
  },
  presets: ["@babel/react", "@babel/env"],
  moduleNameMapper: {
    '^@src/(.*)$': '<rootDir>/src/$1'
  },
  transformIgnorePatterns: [
    "node_modules/(?!(node_modules/react-pdf|node_modules/pdfjs-dist)/)"
  ],
};

babel.config.js

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react']
};

我尝试过的：

使用
• @babel/preset-env

   和 

  @babel/preset-react

   配置 Babel。

在
• babel-jest

   中将 

  jest.config.js

   添加到 Jest 配置中。

更新了 Jest 以使用
• .jsx?

   转换 

  babel-jest

   文件。

确保 Node.js 版本 (
• node --version

  ) 与 Babel 的预设目标兼容。

Answer 1

尝试执行以下步骤来修复 React 应用程序的 Jest 测试中的 `SyntaxError: Unexpected token 'export'} 问题：

1.确保你已经在 `jest.config.js} 中正确配置了 Jest，以使用 babel-jest 来转换 JSX 文件：

module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest'
  },
  // other Jest configuration options
};

2.确保“babel.config.js”中的 Babel 配置包含必要的 React 和环境预设：

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react']
};

3.更新“jest.config.js”中的 Jest 配置，以正确忽略某些节点模块转换：

transformIgnorePatterns: [
  "node_modules/(?!(node_modules/react-pdf|node_modules/pdfjs-dist)/)"
]

4.验证您的 Jest 配置是否正确识别别名路径的 `moduleNameMapper}：

moduleNameMapper: {
  '^@src/(.*)$': '<rootDir>/src/$1'
}

按照以下步骤并确保 Babel、React 和 Jest 配置均已正确设置，您应该能够在 React 项目的 Jest 测试中修复 `SyntaxError: Unexpected token 'export'}。