Next.js+TS项目Jest测试split-pane-react遇模块找不到及导出错误

核心问题分析 #

split-pane-react@0.1.3的ES模块未被Jest正确转译，同时模块解析路径配置不当，导致先出现找不到模块的错误，调整映射后又触发ES语法未转译的问题。

具体解决步骤 #

1. 调整Jest配置文件 #

修改jest.config.js，配置正确的模块映射、转译规则：

/** @type {import('jest').Config} */
const config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    // 改用CommonJS入口，避免ES模块语法兼容问题
    'split-pane-react': '<rootDir>/node_modules/split-pane-react/lib/index.js',
    // 处理Next.js项目的静态资源映射
    '^.+\\.(css|sass|scss)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    // 让babel-jest处理split-pane-react的JS文件
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  transformIgnorePatterns: [
    // 只排除node_modules中除split-pane-react外的包，允许Jest转译它
    '/node_modules/(?!split-pane-react)/',
  ],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

module.exports = config;

2. 配置Babel（若项目使用Babel） #

如果项目依赖Babel，确保babel.config.js支持转译ES模块：

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

3. 确认测试依赖安装 #

确保所有必要的测试依赖已安装：

npm install --save-dev jest ts-jest babel-jest @types/jest identity-obj-proxy

为什么之前的配置没用？ #

• 之前映射到esm/index.js是未转译的ES模块，Jest默认不处理node_modules里的ES模块，导致export语法报错
• transformIgnorePatterns需要明确不忽略split-pane-react，让Jest对其进行转译，之前的配置可能没写对规则

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