React+TypeScript项目Jest遇react-bootstrap意外令牌错误求助

问题根源 #

Create React App（CRA）默认配置中，Jest会跳过node_modules目录下文件的转译，但react-bootstrap目前输出的是ES模块语法，Jest无法直接识别这些import语句，导致报错。

修复步骤 #

1. 还原CRA默认配置（避免手动配置冲突） #

如果之前手动安装了ts-jest或自定义了jest.config.js，先做以下操作：

• 卸载手动安装的ts-jest相关依赖：

  npm uninstall ts-jest @types/jest
  

• 删除自定义的jest.config.js（CRA自带的Jest配置已足够处理TypeScript）
• 如果有自定义的babel.config.js，可以删除改用CRA默认配置；若需保留，确保内容如下：

  module.exports = {
    presets: [
      'react-app'
    ]
  };
  

2. 修改package.json中的Jest配置 #

在package.json中添加jest字段，指定需要转译的node_modules包：

{
  "name": "sample",
  "version": "0.1.0",
  // ...其他字段
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(react-bootstrap|@restart/ui|react-transition-group|@popperjs/core)/)"
    ]
  }
}

该配置会让Jest不忽略react-bootstrap及其依赖包的转译，其他node_modules包仍保持默认跳过。

3. 验证测试代码写法 #

确保测试组件的写法符合CRA测试规范，示例：

import { render, screen } from '@testing-library/react';
import { Row, Col } from 'react-bootstrap';

test('renders bootstrap row and col', () => {
  render(
    <Row>
      <Col>Test Content</Col>
    </Row>
  );
  expect(screen.getByText('Test Content')).toBeInTheDocument();
});

4. 重新运行测试 #

执行测试命令：

npm test

额外说明 #

• CRA 5.x版本完全兼容上述配置；更低版本可能需要调整正则表达式写法。
• 非必要不要修改CRA默认配置，否则易引发兼容性问题。

内容的提问来源于stack exchange，提问作者Shahryar Tavakkoli