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

k4aesqcs  于 12个月前  发布在  Jest
关注(0)|答案(2)|浏览(122)

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

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

字符串
当我运行Jest/Enzyme来测试组件时,我得到以下错误
元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:您可能忘记了从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
我是不是需要嘲笑一下?我怎么能这么做

3qpi33ja

3qpi33ja1#

虽然@skyboyer指出的解决方案对我有效,但在运行测试时,它在控制台中显示了以下错误:

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

字符串
在mock文件中更改为以下内容对我来说是一个解决方案:

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

export const ReactComponent = SvgrMock;
export default SvgrMock;


参考

uurv41yg

uurv41yg2#

1.为svg添加一个模拟文件,并将其放在svg_mocks_mocks文件夹中
1.在jest配置中添加模块名称Map器

mocks/svgMock.js

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

字符串

Jest.config.js

module.exports = {
    ...
    moduleNameMapper: {
        ...
        '\\.(svg)$': '<rootDir>/__mocks__/svgMock.js',
    },
};

相关问题