DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Jest Tutorial For Beginners: Different Ways of Running Test [3/4]
ABIDULLAH786
ABIDULLAH786

Posted on • Updated on

Jest Tutorial For Beginners: Different Ways of Running Test [3/4]

Before moving forward I would suggest that take please check the previous section for the basics of jest test and project configurations.

In this section, we will further deep dive in jest.

Different Ways of Running test:

The command npm test or npm run test will run all test suites available in the project.

Running 1 test case or 1 test suite

Method-I
To run a specific test suite (test-file) run this command npm test -- <file_name>. For that all the below three commands are correct.

npm test -- sum
Enter fullscreen mode Exit fullscreen mode
npm test -- sum.test
Enter fullscreen mode Exit fullscreen mode
npm test -- sum.test.js
Enter fullscreen mode Exit fullscreen mode

To run a specific test (test_case) run this command

npm test -- -t "<test_case_name>"
Enter fullscreen mode Exit fullscreen mode
  • Considering our previous example, in that example, the test case name is add so for that we have to write a command like this

    npm test -- -t add
    
  • this has one disadvantage, against the above command all the .test.js files will be searched for add and all tests will execute.

  • Also if any test case has the word add that will execute no matter which .test.js file it is.

  • these all because the command -t helps us to set the regular expression and it can math any test case string.

The batter solution for the above scenario is to combine the test suite name and test case name to restrict the command more like

npm test -- sum.test.js -t add
Enter fullscreen mode Exit fullscreen mode
  • But still, more than one test case can be run if there is any test case in a test_suite that has the word add.

Method-II - Using .only()

When you mark the single test_case with only() the jest will run only for test_cases that are defined with the method only() and skip all the other test_cases.

you can mark or define more than one test_cases with only().

This will help to restrict the command for jest. now the previously discussed command will work correctly

npm test -- sum.test.js
Enter fullscreen mode Exit fullscreen mode

Example
sum.test.js file

const sum = require("../sum")
test.only("2 + 2 equal 4, add",()=>{
    expect(sum(2,2)).toBe(4);
});

test("add",()=>{
    expect(sum(2,4)).toBe(6);
});
Enter fullscreen mode Exit fullscreen mode

After running the command npm test -- sum.test.js you will get the following result.

 PASS  __test__/sum.test.js
  √ 2 + 2 to equal 4, add (5 ms)
  β—‹ skipped add
Enter fullscreen mode Exit fullscreen mode

Method-III - Watch Mode

Watch mode has advantages one of them is that it will look for changes in .test.js files and will re-test for changes.

Secondly, after starting testing or looking at changes in .tes.js files it will generate a menu to quickly select an action.

To do so run the following command

npm test -- --watch
Enter fullscreen mode Exit fullscreen mode

After running the above command you will get the menu as shown below:

Watch Usage
 β€Ί Press f to run only failed tests.
 β€Ί Press o to only run tests related to changed files.
 β€Ί 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.
Enter fullscreen mode Exit fullscreen mode

Now select the option whatever you want.

Getting the test report in a pretty form:

To get the pretty result of the test use the following command

npm test --coverage
Enter fullscreen mode Exit fullscreen mode

The above command will give the result in the following form:

 PASS  __test__/index.test.js
 PASS  __test__/sum.test.js
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 sum.js   |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------

Test Suites: 2 passed, 2 total
Tests:       1 skipped, 2 passed, 3 total
Snapshots:   0 total
Time:        2.27 s
Ran all test suites.
Enter fullscreen mode Exit fullscreen mode

Note: as you may notice the in result that all the test suites (test_files) and the test cases in it are execute my jest.

Conclusion:

Note: if you are the bagginer then i will suggest to not follow whatever suggested in the conlusion.

So try to use the short command for all the techniques you have seen so far. This will not only save your some time, but also improve the overall develper experience.

Set the commands in your package.json file.

{
...
  "scripts": {
    "test": "jest",
    "testw": "jest --watch",
    "testc": "jest --coverage",
...
  },
  "devDependencies": {
    "jest": "^18.1.0",
    ...
  },

}
Enter fullscreen mode Exit fullscreen mode

And if you are using the vs code than install the jest runner extension to save more time.


Exploring new concepts and sharing them with others is my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, Linkedin and GitHub

As you know that everyone has a room to improve, so your suggestion is appreciated. And I would love (❀️) to know something new.

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!