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

【问题标题】：How to get unit test coverage of components run inside loop in React and Jest如何获得组件的单元测试覆盖率在 React 和 Jest 中的循环内运行
【发布时间】：2018-08-24 18:05:23
【问题描述】：

我为吐出原子化组件图标的组件编写了一个单元测试（来自从 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% 覆盖率。有什么想法吗？

【问题讨论】：

标签： javascript reactjs unit-testing jestjs create-react-app

【解决方案1】：

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

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

【讨论】：

#facepalm 完全忘记了我改回 spans 并且旧文件通过一个棘手的合并流下来...... smh.. 谢谢 Eon_Cyber