使用 Jest 测试/模拟 ReactComponent SVG 导入

Question

ReactComponent例如，我将 SVG 导入到我的组件中，并将它们作为组件导入

import { ReactComponent as D1 } from '../../../assets/images/characteristics/D1.svg';

当我运行 Jest/Enzyme 来测试组件时，出现以下错误

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

看来我需要嘲笑这个吗？我怎么能这么做呢？

Answer 1

尽管@skyboyer指出的解决方案对我有用，但在运行测试时它在控制台中显示以下错误：

<SvgrURL /> is using incorrect casing. Use PascalCase for React components, 
or lowercase for HTML elements.

更改为模拟文件中的以下内容对我来说是一个解决方案：

import React from 'react';
 
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;
export default SvgrMock;

参考