如何在 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，即使它们被渲染得很好并且我得到 100% 的覆盖率 icongenerator.js 文件。有什么想法吗？

Answer 1

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

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

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

How to get unit test coverage of components run inside loop in React and Jest

javascript

unit-testing

reactjs

jestjs

create-react-app

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

How to get unit test coverage of components run inside loop in React and Jest

javascript

unit-testing

reactjs

jestjs

create-react-app

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