Question

我正在将SVG导入到我的组件中，并使用ReactComponent将它们作为组件导入即

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

当我运行玩笑/酶进行测试时，出现错误：元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者您可能混淆了默认导入和命名导入。

看来我可能需要嘲笑吗？我该怎么办？

谢谢

Answer 1

@skyboyer回答了-他附上的文件解决了这个问题

Answer 2

尽管@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;

reference

用Jest测试/模拟ReactComponent SVG导入

2 个答案: