@ionic/react-test-utils

Ionic React Test Utils

This is a set of helper methods to make testing easier in Ionic React with React Testing Library and Jest.

Installation

yarn add -D @ionic/react-test-utils

or

npm install --dev @ionic/react-test-utils

Custom ionFireEvent

ionFireEvent extends Testing Library's fireEvent by adding the custom ion* events. This can be used as a drop in replacement for fireEvent or used in conjunction with.

import { ionFireEvent as fireEvent } from '@ionic/react-test-utils';

...


fireEvent.ionChange(element, 'my text');

mockIonicReact

This method mocks out certain Ionic components that have issues rendering in JSDOM. To use it, open up setupTests.ts and add this to the file:

import { mockIonicReact } from '@ionic/react-test-utils';
mockIonicReact();

If you are using Ionic v6, you will also need to call setupIonicReact:

import { mockIonicReact } from '@ionic/react-test-utils';
import { setupIonicReact } from '@ionic/react';

setupIonicReact();
mockIonicReact();

waitForIonicReact

This function waits for Ionic React to be fully initialized. Use this in any test that renders Ionic components, to ensure the rendered markup has all classes etc. that Ionic adds at runtime.

import { render } from '@testing-library/react';
import { waitForIonicReact } from '@ionic/react-test-utils';
import MyComponent from './MyComponent';

describe('<MyComponent />', () => {
  it('renders consistently', async () => {
    const { baseElement } = render(<MyComponent/>);
    await waitForIonicReact();
    expect(baseElement).toMatchSnapshot();
  });
});

waitForIonicReact waits for the DOM to be stable, meaning no markup has changed for a certain period of time. This period is determined by the first parameter, timeout, which defaults to 750 milliseconds. There is also a global timeout determined by the second parameter, maxWaitTime. This defaults to 5000 milliseconds (five seconds) and, if hit, will cause the function to fail early. If you find your tests are running too slow or not detecting all Ionic behaviors, try tweaking these values.