You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Learn how to test an Ionic React application. This document provides an overview of how to test an application built with @ionic/react.
5
+
---
6
+
7
+
# Testing Ionic React
8
+
9
+
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.
10
+
11
+
## Introduction
12
+
13
+
Testing is an important part of the development process, and it helps to ensure that an application is working as intended. In `@ionic/react`, testing is done using a combination of tools and libraries, including Jest, React Testing Library, Playwright or Cypress.
14
+
15
+
## Types of Tests
16
+
17
+
There are two types of tests that can be written:
18
+
19
+
**Unit Tests**: Unit tests are used to test individual functions and components in isolation. [Jest](https://jestjs.io) and [React Testing Library](https://testing-library.com) are commonly used for unit testing.
20
+
21
+
**Integration Tests**: Integration tests are used to test how different components work together. [Cypress](https://www.cypress.io) or [Playwright](https://playwright.dev) are commonly used for integration testing.
In your test template when rendering with React Testing Library, you must wrap your component with an `IonApp` component. This is required for the component to be rendered correctly.
10
+
11
+
```tsx title="Example.test.tsx"
12
+
import { IonApp } from'@ionic/react';
13
+
import { render } from"@testing-library/react";
14
+
15
+
importExamplefrom'./Example';
16
+
17
+
test('example', () => {
18
+
render(
19
+
<IonApp>
20
+
<Example />
21
+
</IonApp>
22
+
);
23
+
...
24
+
});
25
+
```
26
+
27
+
## Use `user-event` for user interactions
28
+
29
+
React Testing Library recommends using the `user-event` library for simulating user interactions. This library provides a more realistic simulation of user interactions than the `fireEvent` function provided by React Testing Library.
description: Learn how to set up unit tests for an Ionic React application.
5
+
---
6
+
7
+
# Unit Testing Setup
8
+
9
+
Ionic requires a few additional steps to set up unit tests. If you are using an Ionic starter project, these steps have already been completed for you.
10
+
11
+
### Install React Testing Library
12
+
13
+
React Testing Library is a set of utilities that make it easier to test React components. It's used to interact with components and test their behavior.
Ionic React requires the `setupIonicReact` function to be called before any tests are run. Failing to do so will result in mode-based classes and platform behaviors not being applied to your components.
22
+
23
+
In `src/setupTest.ts`, add the following code:
24
+
25
+
```diff
26
+
import '@testing-library/jest-dom/extend-expect';
27
+
28
+
+ import { setupIonicReact } from '@ionic/react';
29
+
30
+
+ setupIonicReact();
31
+
32
+
// Mock matchmedia
33
+
window.matchMedia = window.matchMedia || function () {
0 commit comments