将SVG作为ReactComponent使用时Jest测试报错问题排查

1. Jest 未处理 SVG ReactComponent 导入 #

开发环境中（如 Webpack/Vite）的 loader 会将 SVG 文件转换为 React 组件，但 Jest 默认不识别 {ReactComponent as XXX} 这种导入语法，导致导入的 SVG 组件在测试环境中为 undefined，渲染时触发类型错误。

解决方法：
配置 Jest 对 SVG 文件进行 mock：

• 在 Jest 配置文件（jest.config.js/jest.config.ts）中添加：

moduleNameMapper: {
  '\\.svg$': '<rootDir>/__mocks__/svgMock.tsx'
}

• 在项目根目录创建 __mocks__/svgMock.tsx 文件，内容如下：

import React from 'react';
const MockSvg = () => <svg />;
export const ReactComponent = MockSvg;
export default MockSvg;

2. mapCategory 函数缺少 default 分支 #

如果传入的 category 不在 switch 的 case 列表中，函数会返回 undefined，而 React 无法渲染 undefined，直接抛出类型错误。即使业务代码不会传入无效值，测试用例可能触发边界场景。

解决方法：
给 switch 添加 default 分支，返回默认组件或占位元素：

export const mapCategory: React.FC<any> = (category: string) => {
  const _category = category.toUpperCase();

  switch (_category) {
    case 'DEFI':
      return <Defi/>;
    case 'DEVELOPMENT':
      return <Development/>;
    case 'EDUCATION':
      return <Education/>;
    case 'GAMES':
      return <Games/>;
    case 'IDENTITY':
      return <Identity/>;
    case 'MARKETPLACE':
      return <Marketplace/>;
    case 'NFT':
      return <NFT/>;
    case 'OTHER':
      return <Other/>;
    case 'SECURITY':
      return <Security/>;
    case 'SOCIAL':
      return <Social/>;
    // 添加默认分支
    default:
      return <Other/>; // 或返回 null、<span /> 等占位元素
  }
}

3. 测试用例可能传入未覆盖的 category 值 #

检查测试代码中是否给 CategoryChip 传入了不在映射列表中的 label，触发 mapCategory 返回 undefined 的情况。

解决方法：
确保测试用例的 label 都在映射的 category 范围内，或者配合上述 default 分支处理。

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