# Testing Stack

## Testing React

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

* [Vitest](https://vitest.dev/)
* [jsdom](https://github.com/jsdom/jsdom)
* [React Testing Library](https://testing-library.com/)
* [@testing-library/jest-dom](https://github.com/testing-library/jest-dom)
* [@testing-library/user-event](https://github.com/testing-library/user-event)
* [vitest-fetch-mock](https://github.com/IanVS/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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ga0-2.gitbook.io/seifxr10anz-content/week-21/day-3-testing-react/testing-stack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.