Unit Testing Setup

Ionic requires a few additional steps to set up unit tests.

Install React Testing Library

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.

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

Initialize Ionic React

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.

In src/setupTest.ts, add the following code:

import '@testing-library/jest-dom/extend-expect';

+ import { setupIonicReact } from '@ionic/react';

+ setupIonicReact();

// Mock matchmedia
window.matchMedia = window.matchMedia || function () {
  return {
    matches: false,
    addListener: function () { },
    removeListener: function () { }
  };
};