Very high memory/cpu usage while testing React components with Karma in Chrome

Question

Currently in my project I'm using Karma and Mocha, with React Test-Utils to test my react components.

I currently have around 1200 tests, most of which are for my library of react components.

When these tests run, chrome often exceeds 2gb of memory, and its CPU usage spikes well over 30%

Most of my tests look something like this -

const React = require('react');
const TestUtils = require('react-dom/test-utils');
const ReactDOM = require('react-dom');
const expect = require('chai').expect;

const Users = require('./../../../../../../client/components/contentComponents/Example.jsx');

const componentProps = () => {
    return {
        exampleProp: 'ExampleProp'
    };
};

it('Example Test Block', () => {
    it('Component should be rendered on the page', () => {
        const objComponent = TestUtils.renderIntoDocument(React.createElement(Users, componentProps()));
        const objComponentHtmlElement = ReactDOM.findDOMNode(objComponent);
        expect(objComponentHtmlElement).to.not.be.undefined;
    });

it('Example Test 1', () => {
        const objComponent = TestUtils.renderIntoDocument(React.createElement(Example, compnentProps()));
        expect(ExampleAssertion).to.equal(true);
    });
});

Is there anything obvious here that would cause such high CPU and memory usage? Is the usage I'm seeing expected with this number of tests?

I can see that when the test is running the chrome window fills up with lots of different rendered components at once, seemingly not unmounting them, am I maybe missing a step in my tests where the rendered component needs to be unmounted or destroyed?

Answer 1

Nothing immediate jumps out at me, but I do wonder if there are pieces of your components which are left in the DOM after your tests. Here is a recommended test cleanup proceedure from a Forbes article to address one aspect of this in Angular tests. It may apply to React as well:

export function cleanStylesFromDOM(): void {
    const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
    const styles: HTMLCollectionOf<HTMLStyleElement> | [] = head.getElementsByTagName('style');

    for (let i: number = 0; i < styles.length; i++) {
        head.removeChild(styles[i]);
    }
}

afterAll(() => {
    cleanStylesFromDOM();
});