In most projects in this course, when running npm test, you are actually invoking a script defined in package.json like this:

 "scripts": {
    "test": "react-scripts test",

Some documentation for this can be found here:

https://create-react-app.dev/docs/running-tests/

Command line options for `npm test`

By typing the following command (note the extra -- in the middle) you can get a list of command line options for npm test.

Note that the -- means that any further command line options are passed to jest, which is the software that is used by npm test, rather than being passed to npm itself.

npm test -- --help

A reference for these options appears here: https://jestjs.io/docs/cli

Running only some tests

One of the most useful command line options is the simple -t option, which takes a regular expression for the test description as its argument.

Running only tests from a certain file

Suppose the test you are working on is in the file frontend/src/tests/components/Commons/CommonsTable.test.js.

You can copy this path in VSCode by right clicking at the top of the file tab and selecting Copy Relatve Path, like this:

right click on top tab, select 'Copy Relative Path'

Then you can paste that into this command (note that you must use the arrow key on the command line to delete the prefixed frontend/ since you are already in that directory:

npm test -- src/tests/components/Commons/CommonsTable.test.js

This runs only tests from this file, as shown below:

screenshot showing tests only run from one file

Running only tests with a certain description:

Suppose you are working on this test:

 test("Has the expected column headers and content for adminUser", () => {

If you type the following, it will run only tests that match this description:

npm test -- -t "Has the expected column headers and content for adminUser"

As it turns out, when I ran this example, there were two tests that matched this description, in two different files. One passed and the other failed, as shown in this output:

screenshot showing that one test passed and another failed

Since the argument is a regular expression, we can often specify just part of it with the same effect. For example, this has the same effect as the longer command above:

npm test -- -t "Has the expected column headers"

Here’s what that looks like; note that it matches the output above in terms of which tests were run:

screenshot showing that one test passed and another failed

Running only tests from a specific file with a specific description

We can also restrict to running only tests from a certain source file, for example, only the tests in frontend/src/tests/components/Commons/CommonsTable.test.js by combining the two command arguments:

npm test -- src/tests/components/Commons/CommonsTable.test.js -t "Has the expected column headers"

Now we get only the single test run:

output from npm test -- src/tests/components/Commons/CommonsTable.test.js -t 'Has the expected column headers'

More test output

When working with npm test (which uses jest under the hood), sometimes you get a test failure such as this:

 TestingLibraryElementError: Unable to find an element by: [data-testid="SectionsTable-cell-row-1-col-action-add-button"]

This is often followed by a listing of the HTML such as this:

 <body>
      <div>
        <table
          class="table-hover table table-bordered table-hover"
          data-testid="SectionsTable"
        >
          <thead>
            <tr>
              <th
                colspan="1"
              >
...

And it goes on and on, but is eventually truncated, sometimes before it gets to the part you really need to see in order to debug the test failure.

But there’s a way to see more of the output!

When running npm test, prefix it with a setting of the environment variable DEBUG_PRINT_LIMIT, like this:

DEBUG_PRINT_LIMIT=50000 npm test

You can also set it for an entire bash session by doing this:

export DEBUG_PRINT_LIMIT=50000

Command line options for npm test