1

目前在我的项目中，我正在使用 Karma 和 Mocha，以及 React Test-Utils 来测试我的反应组件。

我目前有大约 1200 个测试，其中大部分是针对我的反应组件库的。

运行这些测试时，chrome 的内存经常超过 2gb，其 CPU 使用率飙升超过 30%

我的大多数测试看起来像这样 -

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

这里有什么明显的东西会导致如此高的 CPU 和内存使用率吗？我所看到的使用量是否与此数量的测试有关？

我可以看到，当测试运行时，chrome 窗口一次充满了许多不同的渲染组件，似乎没有卸载它们，我是否可能在测试中错过了需要卸载或销毁渲染组件的步骤？

4

1 回答 1

0

没有什么能立即对我产生影响，但我确实想知道在您的测试之后是否有一些组件留在 DOM 中。这是福布斯文章中推荐的测试清理程序，用于解决 Angular 测试中的一个方面。它也可能适用于 React：

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();
});
于 2020-11-02T15:01:33.287 回答