The yarn test command
This function starts the test runner.
Running test does exactly what you'd expect it to do: runs all of your tests for your application. By default, when you spin up a new project with Create React App, your project will include many extra tools that should all be ready for you to start hacking away at the tests. This is especially helpful if you choose to approach a more test-driven development approach to your project, something that can be incredibly useful in a frontend development world.
The first time you run test, you should see some output on your screen that may look a little like this:
PASS src/App.test.js
renders without crashing (18ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.976s
Ran all test suites related to changed files.
Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
Even better than all of this being built and provided to you is all of the options and additional tools that you get along the way for this! Getting a test framework set up and running consistently in your application can be a major pain in the neck, so having this figured out for you makes your life a thousand times easier. On top of all of this, the test watcher that comes with Create React App projects will also watch and live-reload on changes made to any related files, similar to the start command.
These are just the defaults. It's worth taking a look at some of the extra commands that come along with our test watcher:
- Press a to run all tests: Like the command says, if you press A in that window, it will just decide to run every single test in your project from zero and output the results. Use this if you need it and need to verify a fully-green test suite at any time.
- Press f to run only failed tests: I speak from personal experience when I say setting something such as this up in the past was an absolutely dreaded task. This is great when you're taking an approach of red, green, refactor in your project and want only the tests that failed last time and are just trying to get those to pass. You can use this as part of your development methodology to slowly clear away the cruft of your application's failing tests until you're back to all of them passing!
Red, green, refactor: This refers to a common pattern of development where you write your tests first with the intention of them failing, then write the minimum amount of code to make them pass, then refactor the code until they break again, and repeat the cycle. While this is usually used in an interview context instead of real-world development, the process itself is very much a real-world process.
- Press p to filter by a filename regex pattern: This is a very cool bit of functionality. Let's say you modified some code that affected all functionality related to users, but you have a giant test suite and don't want to test the entire thing. You could instead target all user code by hitting P, and then typing in user and seeing what tests run.
- Press t to filter by a test name regex pattern: Similar to the previous option, but this goes a step further by looking at what your tests are named (more on this in a later chapter) and runs tests based on those descriptions instead of by the filenames the tests are located in.
- Press q to quit watch mode: There is not much to explain here; this will quit the test watcher.
- Press Enter to trigger a test run: Pressing Enter will just redo whatever your last test was, which is very helpful when you're using one of the regex pattern options but don't want to have to retype the pattern every single time.