I have few Jest test for React component with Enzyme in Typescript.
The performance of Jest seems to be very very poor. Here is a screenshot of some test cases.
The total amount of time for each test in a file is <1sec, but the total runtime is >400sec for a file - this is insane! We have some files and the total test time can take >2hours!
This times are little bit faster when we run this again, but the problem is that CI takes a lot of time.
Here are the Jest configuration files. Any idea how to make this reasonable?
This is the 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"
}
};
This is the setupTest.js
// Initialize Enzyme
import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });
One of the tests (just changed the name of the components and props):
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'))
});
Vesions:
"jest": "24.9.0"
"ts-jest": "24.0.2"
"enzyme": "3.7.0"
"enzyme-adapter-react-16": "1.7.0"
