Next使用jest测试含svg的组件时报错的解决方案

报错信息

console.error
      Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
      
      Check the render method of `Comp`.

根因

jest.config.ts中的默认配置不对

export default createJestConfig(config);

解决办法

将上面那行代码改成这样

export default async (...args:any[]) => {
  const fn = createJestConfig(config);
  // @ts-ignore
  const res = await fn(...args);
  // 这里可以log出来默认配置，可以发现moduleNameMapper会对svg进行特殊处理，导致了bug的发生
  delete res.moduleNameMapper!['^.+\\.(svg)$'];
  return res;
};

并在jest.config.ts增加配置

  transform: {
    '^.+\\.(svg)$': 'jest-transformer-svg'
  }

运行如下命令

npm i -D jest-transformer-svg

(jest-svg-transformer已不再维护，建议使用jest-transformer-svg)

重新运行npm run test就会发现报错已经消失