javascript - 如何获得在 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，您需要 require/render 它们，您也可以在循环中执行此操作。

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