Testing 

React.js

React.js

Main motivation 

* Ship with confidence

     Sanity / regression

* CI / CD

     Automated process

* Accountability

     Correlating feature tickets to bug issues and bug fixes

* Documentation

     Demonstrate how your code can and should be used

* More unit tests == less QA

     Shorter development cycles

React.js

Top level testing categories

* Manual tests
     Test interactions in various use cases manually (takes longer & cost more)

* Automated tests

    Checks your code features by running it in various use case scenarios

* Static Analysis

    Checks your code without running it  - eslint & Typescript

React.js

Automated tests 

* Unit tests
     Individual components and functions

* Integration tests

    Test a group of components

* End-to-end tests

    Test the  entire system in various use-case scenarios

* Load / Stress / performance testing

    Test the system behaviour under certain conditions

React.js

Unit testing

* Pure logic  
     Pure functions - both sync and Async code

* Stateful logic

   +React update cycle - custom hooks - sync / async

* UI tests

    Test the generated UI elements + interactivity

* Snapshots testing

     Validate the UI didn't change after integrating new features

What do we actually want to test?

React.js

What kind of Tools do we need?

* a framework to run our tests
     Run tests, setup & teardown, timeout configuration etc...

* Assertions vocabulary

    Provide a language API to write our actual tests assertions

* Mimic DOM & events

     Virtual DOM & user interaction simulations

* Mocking

     Mock the unit external dependencies I/O

* Test coverage

     How much of our code base is covered by tests

React.js

Testing frameworks

* Mocha      Used to be the most popular, big ecosystem

* Jasmine   Similar to mocha, less popular

* Jest           The dominant tool for JS testing

* Ava           Used to be the future, run tests in parallel

* Tape         lean, tiny, simple & minimal configuration

compare on npm trends 

* vitest        Same jest api. faster. easier to config.

React.js

Assertion libraries

* Should.js 

* expect.js          

React.js

Mimic DOM & events

* Enzyme       

React Native Specific

React.js

Mocking

* Jest

the unit external dependencies

Functions & modules

Mock network response

* Nock

* MSW

* Mirage

* Faker

Generate dummy data

React.js

Test coverage

* Included in Jest

React.js

Demo time!