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

Question

我为组件编写了一个单元测试，该组件吐出了雾化的组件图标（来自icomoon.io构建的自定义库）。我遇到的问题是，尽管每个组件都能正确渲染； 呈现每个图标的组件的测试在检查时没有覆盖。 理想的结果是，当我'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;

这是测试：

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);
        });
    }
});

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

Answer 1

看起来您不需要或没有呈现任何图标文件，只是一个具有许多不同类型的iconGenerator组件，然后便可以更改类名。 要覆盖各种icon*.js ，您需要要求/渲染它们，也可以循环执行。

更高层次上，我不确定您的图标生成器如何实际“生成”图标，它看起来像呈现跨度的常规ol'组件。 当然，绝对可行！ 但这不是在创建其他组件。