Testing Stack

Testing React

To test our React applications, we will be using these packages:

• Vitest

• jsdom

• React Testing Library

• @testing-library/jest-dom

• @testing-library/user-event

• vitest-fetch-mock

Vitest

Vitest is an alternative test runner/framework to Jest. It integrates perfectly with Vite whereas Jest will require additional configuration and a separate build chain. Vitest is also Jest-compatible so knowledge of one is transferrable to the other.

jsdom

jsdom is a pure JavaScript implementation of web standards. It simulates a web browser and provides a way to interact with the DOM environment within a Node.js runtime. This allows us to mount our React components in order to test them without needing a full web browser.

React Testing Library

React Testing Library is a light-weight utility that helps us write tests for React components in a way that closely mimics how a user would interact with our application. RTL emphasises testing components from a user's perspective instead of testing implementation details. This philosophy promotes more maintainable and resilient tests, as they are less likely to break when refactoring the implementation details.

RTL Companion Libraries

• user-event provides a set of functions to simulate user interactions with elements in a more realistic way.

• jest-dom provides additional custom matchers and utilities for asserting the state and appearance of the DOM elements rendered by React components.

vitest-fetch-mock

vitest-fetch-mock provides a way to mock and control the behavior of the fetch function allowing us to simulate HTTP requests and responses without actually making real network requests.

For mocking axios:

• https://github.com/jacksonGross/vitest-mock-axios

• https://runthatline.com/how-to-mock-axios-with-vitest/

• https://vitest.dev/guide/mocking.html