CODEWITHSUNDEEP
javascriptreactjsunit-testingjestjscreate-react-app
Erik Grosskurth
Erik Grosskurth

Reputation: 3932

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

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?

Upvotes: 2

Views: 1515

Answers (1)

sibnerian
sibnerian

Reputation: 93

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.

Upvotes: 2

Related Questions