React项目中Jest无法解析匿名函数内联类型问题求助

这个问题的根源是Jest依赖的Babel转译器未配置TypeScript支持，导致它把TS的类型注解当成了无效JavaScript语法。Vite能正常运行是因为它默认用esbuild处理TypeScript，天然支持类型语法。

解决步骤： #

1. 安装Babel TypeScript预设及相关依赖

npm install --save-dev @babel/preset-typescript @babel/preset-react @babel/preset-env babel-jest

2. 配置Babel（创建babel.config.js文件）

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

3. 调整Jest配置（jest.config.js）
   确保Jest用babel-jest处理TypeScript/TSX文件，同时指定TS配置文件：

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest'
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  roots: ['<rootDir>/src'],
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'] // 可选，用于React测试库扩展
};

4. 验证配置
   重新运行Jest：

npm test

临时 workaround（不推荐长期使用） #

如果暂时不想调整配置，可以把内联类型抽成单独的类型别名：

type ChangeHandler = (event: React.FormEvent<HTMLInputElement>) => void;

const onChange = useCallback<ChangeHandler>((event) => {
  setDarkMode(event.currentTarget.checked);
}, [setDarkMode])

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