How to run 1000 React tests per second

Published: 2023-06-08 by Lars  tooltestcode

Presentation by Lars Thorup at Copenhagen React meetup June 8th, 2023.

Video recording on Youtube

• A couple of years ago, in a previous company of mine, we had very fast front-end tests
  • running 100s of tests per second
• These days, front-end tests tend to be slow
  • barely running 1 test per second
• WTF?!?

Note: I had to write a follow-up blog post to this one: We can still run 1000 React tests per second - reconciler edition

How it started

(1553 tests in 4 seconds - with Mocha and Enzyme)

How it's going

(89 tests in 80 seconds - with Vitest, React Testing Library and jsdom)

So: what's the problem?

• It's not just Jest (although Vitest is faster)
• It's not just React Testing Library
• It's primarily the DOM
  • and yes: jsdom is even slower than a real browser

Prefer unit tests over integration tests

• How to write unit tests for the front-end?
• Exclude the DOM from testing
• Focus on testing our own code
• Interact directly with React, our components and the React element tree
• Keep a few integration tests for interesting DOM integration

Introducing "react-test-renderer"

• react-test-renderer
• Like React, it is built by Facebook
• Shipped as part of React
• Includes element queries, like findByProps and findByType, like React Testing Library
• Runs 1000s of tests per second
• Demo in react-test-renderer-sandbox GitHub repo

Simple example test

function Count() {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount((count) => count + 1);
  };
  return (
    <button onClick={onClick}>
      <span>{`count is ${count}`}</span>
    </button>
  );
}

it("should let user click to increment count", () => {
  const { root } = TestRenderer.create(<Count />);
  const button = root.findByType("button");

  button.props.onClick();

  expect(button.props.children.props.children).toEqual("count is 1");
});

Comparison

• Comparing react-test-renderer against React Testing Library
• Sample app, simple DOM, realistic user flow
• RTR: App.react.test.tsx - split into a test per page
• RTL: App.dom.test.tsx - a single test
• RTR is 50-150 times faster than RTL

Trade-offs

• Must invoke component event handlers directly
  • no "DOM" events or "user-event" package
• Must mock various DOM features that our code might depend on
  • like addEventListener, getElementById, scrollTo etc

Pursue the speed!

(1500 tests in 4 seconds - with Vitest and React Test Renderer)

Discuss on Twitter