Javascript 如何在React和Jest中获得在循环内部运行的组件的单元测试覆盖率

我为吐出原子化组件图标的组件编写了一个单元测试（来自一个从icomoon.io构建的自定义库），我遇到的问题是，尽管每个组件都正确渲染；呈现每个图标的组件的测试在检查时不显示覆盖范围。理想的结果是，当i'npm run test:coverage'时，如果每个原子化图标组件在测试中正确呈现，它将显示其覆盖率

目录

* constants
--* iconConstants.js
* components
--* iconGenerator
-----* iconGenerator.js
-----* icons
--------* icon1.js
--------* icon2.js
--------* icon3.js
* __tests__
--* iconGenerator
-----*iconGenerator.test.js

这是发电机：

import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

// Constants
import { ICONS } from '../../constants/iconConstants';

const iconGenerator = (props) => {
    const { type, size } = props;
    const inf = ICONS[type];

    return (
        <span
            className={ cx('ne8-icon', inf.iconCls) }
            style={ { fontSize: `${size}em` } }
            title={ inf.description } />
    );
};

iconGenerator.defaultProps = {
    size: 3,
};

iconGenerator.propTypes = {
    type: PropTypes.string.isRequired,
    size: PropTypes.number,
};

export default iconGenerator;

从“React”导入React；
从“道具类型”导入道具类型；
从“类名称”导入cx；
//常数
从“../../constants/iconConstants”导入{ICONS}；
常量iconGenerator=（道具）=>{
常量{type，size}=props；
常量inf=图标[类型]；
返回(
);
};
iconGenerator.defaultProps={
尺寸：3，
};
iconGenerator.propTypes={
类型：PropTypes.string.isRequired，
大小：PropTypes.number，
};
导出默认iconGenerator；

以下是测试：

import React from 'react';
import ReactDOM from 'react-dom';
import iconGenerator from '../../components/iconGenerator/iconGenerator.js';

import { ICONS } from '../../constants/iconConstants';

describe('iconGenerator', () => {
    const iconKeys = Object.keys(ICONS);

    for (let i = 0; i < iconKeys.length; i += 1) {
        it(`renders ${iconKeys[i]} symbol without crashing`, () => {
            const div = document.createElement('div');
            ReactDOM.render(<iconGenerator type={ iconKeys[i] } />, div);
            ReactDOM.unmountComponentAtNode(div);
        });
    }
});

从“React”导入React；
从“react dom”导入react dom；
从“../../components/iconGenerator/iconGenerator.js”导入iconGenerator；
从“../../constants/iconConstants”导入{ICONS}；
描述（'iconGenerator'，（）=>{
const iconKeys=Object.key（图标）；
for（设i=0；i{
const div=document.createElement（'div'）；
ReactDOM.render（，div）；
ReactDOM.unmountComponentAtNode（div）；
});
}
});

---

当我运行test:coverage时，它显示任何icon.js文件的覆盖率为0，即使它们被渲染得很好，并且我得到了icongenerator.js文件的100%覆盖率。有什么想法吗？

看起来您不需要或呈现任何图标文件，只需要一个具有许多不同类型的

iconGenerator

组件，然后更改类名。要获得各种

图标*.js

的覆盖率，您需要对它们进行要求/渲染，这也可以在循环中进行

---

更高的层次，我不确定你的图标生成器实际上是如何“生成”图标的，它看起来像一个普通的ol组件，呈现一个跨度。当然，这绝对有效！但它并没有创建其他组件。

#facepalm完全忘记了我改回了spans，旧文件通过一个复杂的合并慢慢流下来。。。嗯。。谢谢你