Testing Ionic React
This document provides an overview of how to test an application built with @ionic/react. It covers the basics of testing with React, as well as the specific tools and libraries developers can use to test their applications.
Introduction
Testing is an important part of the development process, and it helps to ensure that an application is working as intended. Applications generated with the Ionic CLI are set up for unit testing with Vitest and React Testing Library, and for end-to-end testing with Playwright. Unit tests live next to the code they test in src and end-to-end tests live in e2e.
The generated package.json includes scripts for running them:
| Script | Description |
|---|---|
npm test | Runs the unit tests once, then the end-to-end tests. |
npm run test:unit | Runs the unit tests once. |
npm run test:unit:watch | Runs the unit tests and re-runs them when files change. |
npm run test:e2e | Runs the end-to-end tests, starting the dev server for them. |
Playwright downloads its browsers separately from the npm package. Run npx playwright install once before running the end-to-end tests for the first time.
Types of Tests
There are two types of tests that can be written:
Unit Tests: Unit tests are used to test individual functions and components in isolation. Jest, Vitest and React Testing Library are commonly used for unit testing.
End-to-end Tests: End-to-end tests are used to test how different components work together in the running application. Playwright and Cypress are commonly used for end-to-end testing.