React-Testing-Library

Jest and React Testing Library

Types of Tests

Anatomy of a Test

TDD Approch

Watch Mode in Jest

Filtering Test

Use the Command line opitions or can use test.only() to use a particular test , or test.skip() to skip a particular test.

Grouping of Tests

Nesting of describe is possible, multiple describe blocks are possible , using .only() and .skip() are also possible.

Filename Conventions

instead of test() , we can use it() and .only() is fit() and .skip() is xit()

Code Coverage and Reports

The report can be viewed in the index.html in the coverage Folder created or in the terminal itself.

To add filters on the type of files to be included in the report -

 "coverage": "react-scripts test --coverage --watchAll --collectCoverageFrom='src/components/**/*.{ts,tsx}' --collectCoverageFrom='!src/components/**/*.{types, stories, constants, test, spec}.{ts,tsx}'"

To add a threshold -

"jest": {
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": -10
      }
    }
  }

Assertions

Refer this link for more - https://jestjs.io/docs/using-matchers

Custom matcher functions - https://github.com/testing-library/jest-dom

What to Test?

RTL Queries