HichamBenjelloun · April 28, 2022 05:45
diff --git a/ionic-react-routes.test.jsx b/ionic-react-routes.test.jsx
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { IonRedirect, IonRoute, IonRouterOutlet } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';

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

 // Using `IonRouterOutlet` here will make `jsdom` render the following DOM tree:
 //   <body>
 //     <div>
 //       <ion-router-outlet />
 //     </div>
 //   </body>
 //
 // Problem: the inner routes are not rendered.
 //
 // A solution to this is to replace `@ionic/react` router components
 // by their equivalents within the `react-router-dom` library.
 jest.mock('@ionic/react', () => {
  const { Router, Switch, Route, Redirect } = jest.requireActual('react-router-dom');

  return {
    ...jest.requireActual('@ionic/react'),
    IonReactRouter: Router,
    IonRouterOutlet: Switch,
    IonRoute: Route,
    IonRedirect: Redirect,
  };
 });

 describe('routes', () => {
  it('should work', async () => {
    const MyRoutes = () => (
      <IonRouterOutlet>
        <IonRoute exact path='/' render={() => <div>Home</div>} />
        <IonRoute exact path='/about' render={() => <div>About</div>} />
        <IonRedirect from='*' to='/about' />
      </IonRouterOutlet>
    );

    const history = createMemoryHistory();

    render(
      <IonReactRouter history={history}>
        <MyRoutes />
      </IonReactRouter>,
    );

    expect(await screen.findByText(/home/i)).toBeInTheDocument();

    history.push('/unknown');

    expect(await screen.findByText(/about/i)).toBeInTheDocument();
  });
 });
	import * as React from 'react';
	import { render, screen } from '@testing-library/react';
	import { createMemoryHistory } from 'history';
	import { IonRedirect, IonRoute, IonRouterOutlet } from '@ionic/react';
	import { IonReactRouter } from '@ionic/react-router';

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

	// Using `IonRouterOutlet` here will make `jsdom` render the following DOM tree:
	// <body>
	// <div>
	// <ion-router-outlet />
	// </div>
	// </body>
	//
	// Problem: the inner routes are not rendered.
	//
	// A solution to this is to replace `@ionic/react` router components
	// by their equivalents within the `react-router-dom` library.
	jest.mock('@ionic/react', () => {
	const { Router, Switch, Route, Redirect } = jest.requireActual('react-router-dom');

	return {
	...jest.requireActual('@ionic/react'),
	IonReactRouter: Router,
	IonRouterOutlet: Switch,
	IonRoute: Route,
	IonRedirect: Redirect,
	};
	});

	describe('routes', () => {
	it('should work', async () => {
	const MyRoutes = () => (
	<IonRouterOutlet>
	<IonRoute exact path='/' render={() => <div>Home</div>} />
	<IonRoute exact path='/about' render={() => <div>About</div>} />
	<IonRedirect from='*' to='/about' />
	</IonRouterOutlet>
	);

	const history = createMemoryHistory();

	render(
	<IonReactRouter history={history}>
	<MyRoutes />
	</IonReactRouter>,
	);

	expect(await screen.findByText(/home/i)).toBeInTheDocument();

	history.push('/unknown');

	expect(await screen.findByText(/about/i)).toBeInTheDocument();
	});
	});