React 18 + Jest环境用OpenLayers 7.1报SyntaxError，缺哪些配置？

我有一个使用OpenLayers 7.1的小型React组件，导入代码如下：

import Map from "ol/Map";

运行Jest（搭配jest-ts等工具）测试时，出现错误：

/Users/jtiai/Code/react-openlayers/.yarn/cache/ol-npm-7.1.0-d92c823b1e-0935be63be.zip/node_modules/ol/Map.js:4
import BaseObject from './Object.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module

  1 | import React from "react";
  2 | import { Box } from "@mui/material";
> 3 | import Map from "ol/Map";
    | ^
  4 |

需要补充的配置步骤 #

1. 让Jest转译OpenLayers模块 #

Jest默认不会处理node_modules里的ES模块代码，但OpenLayers 7.x用的是ES模块语法，得修改Jest配置，让它不忽略OpenLayers的转译。在jest.config.js（或jest.config.ts）里添加：

module.exports = {
  // 其他已有配置...
  transformIgnorePatterns: [
    '/node_modules/(?!ol/)' // 不对ol目录下的代码跳过转译
  ],
  transform: {
    '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest' // 确保用ts-jest处理相关文件
  }
};

2. 确保Babel/TS-Jest支持ES模块 #

如果项目用了Babel，需要在babel.config.js里配置对应的预设，保证能转译ES模块：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript' // 用TypeScript的话加上这个
  ]
};

3. 可选：配置模块路径映射 #

如果前面的配置还没解决问题，可以在Jest配置里添加模块路径映射，确保正确解析OpenLayers的导入：

module.exports = {
  // 其他已有配置...
  moduleNameMapper: {
    '^ol/(.*)$': '<rootDir>/node_modules/ol/$1'
  }
};

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