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

Question

I wrote a unit test for component that spits out atomized component icons (from a custom library built from icomoon.io ) The issue I am having is that despite each component rendering correctly; the test for the component that renders each icon shows no coverage upon the check. The desired outcome is that when i 'npm run test:coverage' it shows coverage for each atomized icon component if it renders correctly in the test.

Directory

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

Here is the generator:

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;

here is the test:

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

When I run the test:coverage it shows 0 coverage for any of the icon.js files even though they are being rendered just fine AND that I get 100% coverage for the icongenerator.js file. Any thoughts?

sibnerian · Accepted Answer · 2018-03-15 19:41:00Z

2

It looks like you're not requiring or rendering any of the icon files, just the one iconGenerator component with many different types, which then change the classname. To get coverage on the various icon*.js, you'd need to require/render them, which you could also do in a loop.

Higher level, I'm not sure how your icon generator actually 'generates' icons, it looks like a regular ol' component that renders a span. Which absolutely works, of course! But it's not creating other components.

answered Mar 15, 2018 at 19:41

sibnerian

931 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erik Grosskurth Over a year ago

#facepalm Completely forgot I changed back to spans and the old files trickled down through a tricky merge... smh.. Thanks Eon_Cyber

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related