Vite+TS项目Jest运行报错Cannot find module 'typescript-cookie'

问题现象 #

在基于Vite + TypeScript搭建的项目中运行测试用例时触发模块找不到报错，报错截图如下：

该报错仅由typescript-cookie模块触发，移除该模块的相关引用后，所有测试用例均可正常运行。

现有配置 #

jest.config.ts #

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
  coverageDirectory: 'coverage',
  setupFilesAfterEnv: ['<rootDir>/src/config/jest-setup.ts'],
  transformIgnorePatterns: ['/node_modules/(?!@element)/'],
  transform: {
    '^.+\.[jt]sx?$': 'babel-jest',
  },
  moduleNameMapper: {
    '@hooks': ['<rootDir>/src/commons/hooks'],
    '@contexts': ['<rootDir>/src/commons/contexts'],
    '@commons': ['<rootDir>/src/commons'],
    '@mock': ['<rootDir>/src/commons/mock'],
    '@common/components': ['<rootDir>/src/commons/components'],
    '@enum': ['<rootDir>/src/commons/enum/'],
    '@interfaces': ['<rootDir>/src/commons/interfaces/'],
    '@utils': ['<rootDir>/src/commons/utils/'],
    '@mainRoutes': ['<rootDir>/src/router'],
    '@services': ['<rootDir>/src/commons/services'],
  },
};

vite.config.ts #

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@hooks': '/src/commons/hooks',
      '@enum': '/src/commons/enum',
      '@mock': '/src/commons/mock',
      '@common/components': '/src/commons/components',
      '@services': '/src/commons/services',
      '@common': '/src/commons',
      '@contexts': '/src/commons/contexts',
      '@interfaces': '/src/commons/interfaces',
      '@utils': '/src/commons/utils',
      '@mainRoutes': '/src/router',
    },
  },
});

根因分析 #

Jest默认运行在CommonJS环境，不会转译node_modules目录下的ES Module格式依赖。当前配置中transformIgnorePatterns仅将@element开头的依赖加入了转译白名单，typescript-cookie本身以ESM格式发布，不在转译白名单内，Jest无法解析其模块导出，因此报模块找不到的错误。

解决步骤 #

• 修改jest.config.ts中的transformIgnorePatterns配置，将typescript-cookie加入转译白名单，修改后配置项如下：

transformIgnorePatterns: ['/node_modules/(?!@element|typescript-cookie)/'],

• 如果修改后仍报错，先删除本地node_modules目录和锁文件，重新执行依赖安装命令，确认typescript-cookie被正确安装到项目依赖中：

# npm
npm install

# yarn
yarn install

# pnpm
pnpm install

• 若上述操作后问题仍存在，检查项目根目录tsconfig.json的compilerOptions配置，确保类型解析路径包含node_modules目录，参考配置：

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types", "node_modules"]
  }
}

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