Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Make React tests fast #2187

Closed
wants to merge 22 commits into from
Closed

Conversation

gaearon
Copy link
Contributor

@gaearon gaearon commented Jun 29, 2018

Currently we have a single giant file with all tests, and a giant snapshot. This is both slow, and hard to work with and iterate on.

In this PR I will refactor our test setup.

  • Split it up into multiple files (gets the test running from 45s to 27s)
  • Run Prettier on test files
  • Split tests further for better performance
  • Make it possible to run one test file
  • Fix the issue with double test re-runs in watch mode on changes in the test file
  • Refactor error handling
  • Run Prettier on fixtures
  • Add a fast mode with yarn test-react-fast <Filename>
  • Fix double reruns on failure

Potential followups:

I introduced a bug where we wouldn't snapshot cases after the first failure, even if failures are expected.
This wasn't a problem in the original code because it separated JSX/no-JSX modes into separate tests.

I fixed my bug by rewriting how error logic works. Hopefully it's more clear now too because it doesn't have to bubble errors all the way up just to run an assertion.
Useful for quick reruns when you don't care about JSX specifically. This lets us skip both 3/4 of tests, and Babel.
@gaearon gaearon changed the title [WIP] Refactor React test setup Refactor React test setup Jun 30, 2018
@gaearon
Copy link
Contributor Author

gaearon commented Jun 30, 2018

I think this is ready for a review now. I'll check remaining followups either later in this PR, or in the next one.

This reduces the time it takes to run yarn test-react from ~45s on my machine to ~21s. It also fixes an annoying issue where a watcher would trigger twice on each change, and clear the screen while you were trying to read it.

It gives you an ability to run a subset of tests from command line, e.g. yarn test-react FirstRender. You can do the same with Jest watcher filtering interface in yarn test-react --watch (and then press p).

When there's a bug in one output mode (e.g. createElement => createElement), it now fails immediately for a particular test case, and doesn't attempt it in other modes (since they would likely fail too). So failures should appear faster.

Additionally, this PR adds yarn test-react-fast for cases when you don't care about JSX syntax tests. It runs all tests in ~10s (and is even faster in watch mode), but the output is a bit noisy because of a warning about "obsolete snapshots" (which aren't really obsolete—just skipped in this mode).

I also added Prettier to tests so we can stop doing the formatting nits.

@gaearon gaearon requested a review from trueadm June 30, 2018 02:40
@gaearon gaearon changed the title Refactor React test setup Make React tests fast Jun 30, 2018
Copy link
Contributor

@trueadm trueadm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!

@gaearon
Copy link
Contributor Author

gaearon commented Jul 2, 2018

Okay, I figured out the last pieces.
Jest tests don't pause properly because of jestjs/jest#6598 and jestjs/jest#6599.
Once that gets fixed, we'll get a fast and responsive test runner.

Copy link

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearon is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants