reactjs - Jest 性能问题

Question

我在 Typescript 中使用 Enzyme 对 React 组件进行了一些 Jest 测试。Jest 的性能似乎非常非常差。这是一些测试用例的屏幕截图。
文件中每个测试的总时间为 <1 秒，但文件的总运行时间为 >400 秒 - 这太疯狂了!我们有一些文件，总测试时间可能需要 >2 小时!

当我们再次运行时，这次会快一点，但问题是 CI 花费了很多时间。

这里是 Jest 配置文件。知道如何让它变得合理吗？

这是jest.config.js:

module.exports = {
    transform: {
        "^.+\\.jsx?$": "ts-jest",
        "^.+\\.tsx?$": "ts-jest",
    },
    transformIgnorePatterns: ["/node_modules/"],
    setupFilesAfterEnv: ["<rootDir>/Tests/config/setupTest.js"],
    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
    moduleDirectories: [
        "node_modules",
        "<rootDir>"
    ],
    modulePathIgnorePatterns: [
        "<rootDir>/bin",
        "<rootDir>/obj"
    ],
    moduleNameMapper: {
        "\\.(css|less|sass|scss)$": "<rootDir>/Tests/config/mocks/styleMock.js",
        "\\.(gif|ttf|eot|svg)$": "<rootDir>/Tests/config/mocks/fileMock.js"
    }
};

这是setupTest.js

// Initialize Enzyme
import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

其中一个测试(只是更改了组件和 Prop 的名称):

import * as React from 'react';
import * as moment from 'moment';
import { shallow } from 'enzyme';

it('test 1', () => {
    const elem = shallow(
        <Foo
            objId="id123"
            subject="subject"
            startTime={new Date(2018, 0, 1, 2, 30)}
            endTime={new Date(2018, 0, 1, 3, 45)} />
    );

    expect(elem.find('.foo').text()).toContain('subject');
});

it('test 2', () => {
    const elem = shallow(
        <Foo
            objId="id123"
            subject="subject"
            startTime={new Date(2018, 0, 1, 2, 30)}
            endTime={new Date(2018, 0, 1, 3, 45)} />
    );

    expect(elem.text()).toContain('foo');
});

it('test 3', () => {
    var today = new Date();
    today.setHours(2);
    today.setMinutes(30);

    const elem = shallow(
        <Foo
            objId="id123"
            subject="subject"
            startTime={today}
            endTime={today} />
    );

    expect(elem.find('.foo').text()).toContain(moment(today).format('dd/MM/yy'));
});

it('test 4', () => {
    var yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 1);
    yesterday.setHours(2);
    yesterday.setMinutes(30);

    const elem = shallow(
        <Foo
            objId="id123"
            subject="subject"
            startTime={yesterday}
            endTime={yesterday} />
    );

    expect(elem.find('.foo').text()).toContain(moment(yesterday).format('dd/MM/yy'));
});

it('test 5', () => {
    var lastWeek = new Date();
    lastWeek.setDate(lastWeek.getDate() - 7);
    lastWeek.setHours(2);
    lastWeek.setMinutes(30);

    const elem = shallow(
        <Foo
            objId="id123"
            subject="subject"
            startTime={lastWeek}
            endTime={lastWeek} />
    );

    expect(elem.find('.foo').text()).toContain(moment(lastWeek).format('dd/MM/yy'));
});

it('test 6', () => {
    var lastMonth = new Date();
    lastMonth.setDate(lastMonth.getDate() - 32);
    lastMonth.setHours(2);
    lastMonth.setMinutes(30);

    const elem = shallow(
        <Foo
            objId="id123"
            subject="subject"
            startTime={lastMonth}
            endTime={lastMonth} />
    );

    expect(elem.find('.foo').text()).toContain(moment(lastMonth).format('dd/MM/yy'));
});

it('test 7', () => {
    var start = new Date();
    start.setHours(2);
    start.setMinutes(30);

    var end = new Date();
    end.setHours(4);
    end.setMinutes(0);

    const elem = shallow(
        <Foo
            objId="id123"
            subject="subject"
            startTime={start}
            endTime={end} />
    );

    expect(elem.find('.foo').first().text()).toContain(moment(start).format('dd/MM/yy'));
    expect(elem.find('.foo').first().text()).toContain(moment(end).format('dd/MM/yy'))
});

版本:

"jest": "24.9.0"
"ts-jest": "24.0.2"
"enzyme": "3.7.0"
"enzyme-adapter-react-16": "1.7.0"

Answer 1

添加到 jest 配置设置:

globals: {
 'ts-jest': {
   diagnostics: {
     ignoreCodes: [151001],
   },
   isolatedModules: true,
  },
},

帮助了我。