How to improve React testing library speed?

Question

I noticed that my first test take like 6 seconds to run, however, it is very simple. It checks whether the Card component renders the passed children successfully:

describe('Card component', () => {
  test('renders children', () => {
    const testString = 'TEST';

    const TestCardChild: React.FC = () => {
      return <p>{testString}</p>;
    };

    render(
      <Card>
        <TestCardChild />
      </Card>
    );

    expect(screen.getByText(testString));
  });
});

I ran the test on another machine with almost the same specs and it runs in a few miliseconds. Do you have a tip on why this happens? Should I allocate more RAM to VS code, or are there any settings that I should apply for React testing library?

Thanks and regards

Andrews

See also Jest - Simple tests are slow – Vaunt

Answer 1

Jest uses babel-jest plugin to compile JavaScript code using Babel.

You can find the ts-jest process here, it will also use the babel-jest processor at the end.

Babel is written by JavaScript whose performance is slower than system-level languages such as Go, and Rust.

The transform process is slow(compared to system-level languages mentioned above), That's why your test suites running slowly.

Now I will use esbuild-jest as jest's transformer. Create two jest config files and compare the time cost.

jest.config.esbuild.js:

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.tsx?$': 'esbuild-jest',
  },
  setupFilesAfterEnv: ['jest-extended'],
  // coverageProvider: 'v8',
  setupFilesAfterEnv: ['./jest.setup.js'],
};

jest.config.rtl.js:

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['jest-extended'],
  setupFiles: ['./jest.setup.js'],
};

Using esbuild-jest:

> jest --config jest.config.esbuild.js "--no-cache" "/workspaces/jest-v26-codelab/stackoverflow/72897761/routes.test.tsx"

 PASS  stackoverflow/72897761/routes.test.tsx
  first
    ✓ Should test 404 route (32 ms)
    ✓ should render home page (10 ms)
    ✓ should render account detail page (3 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.457 s

Time: 1.457 s

Using ts-jest:

> jest --config jest.config.rtl.js "--no-cache" "/workspaces/jest-v26-codelab/stackoverflow/72897761/routes.test.tsx"

 PASS  stackoverflow/72897761/routes.test.tsx (11.246 s)
  first
    ✓ Should test 404 route (32 ms)
    ✓ should render home page (8 ms)
    ✓ should render account detail page (4 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        11.786 s

Time: 11.786 s

esbuild is faster than babel because it's written by Go. For more info, see Why is esbuild fast?

Jest caches transformed module files to speed up test execution. In order not to affect the test results, we use --no-cache option to disable it.

P.S. ts-jest may add esbuild, see issue. And, take a look at this comment:

Not there yet, it will be opted in as experimental feature. esbuild doesn't support some TypeScript specific features which we need to be careful with adoption.

Perla

It is absolutely true that Babel is slow to transpile tests. However, this doesn't address the slowness introduced by the React Testing Library. A faster transpiler will make tests run faster, but without RTL in the mix, you wouldn't need it. – Stoller

You can check your RTL tests with kentcdodds.com/blog/common-mistakes-with-react-testing-library Note also that the queries byRole are very slow according to: github.com/testing-library/dom-testing-library/issues/… – Amid

Answer 2

I myself observed performance improved by 4x using @swc/jest ts-jest. Just run npm install @swc/jest and then update your jest.config.js file as follow :

transform: {
  "^.+\\.(j|t)sx?$": '@swc/jest',
}

The downside is that it transforms Typescript code but doesn't do type checking so you will have to do that aside. I found it much faster to do both separately.

Sputnik