chore: update based on vitest

Author: sean-perkins

docs/react/testing/unit-testing/examples.md

@@ -53,12 +53,6 @@ test('button presents a modal when clicked', async () => {
 
 This example shows how to test a modal that is presented using the `useIonModal` hook. The modal is presented when the user clicks a button.
 
-:::warning
-
-You must mock `requestAnimationFrame` as described in the [setup section](./setup.md#mock-requestanimationframe).
-
-:::
-
 ### Example component
 
 ```tsx title="src/Example.tsx"
@@ -101,7 +95,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import Example from './Example';
 
-test('should present ModalContent when button is clicked', () => {
+test('should present ModalContent when button is clicked', async () => {
   render(
     <IonApp>
       <Example />
@@ -112,7 +106,7 @@ test('should present ModalContent when button is clicked', () => {
   // Wait for the modal to be presented
   await waitFor(() => {
     // Assert that the modal is present
-    expect(screen.getByText('Modal content')).toBeInTheDocument();
+    expect(screen.getByText('Modal Content')).toBeInTheDocument();
   });
 });
 ```

docs/react/testing/unit-testing/setup.md

@@ -8,22 +8,6 @@ description: Learn how to set up unit tests for an Ionic React application.
 
 Ionic requires a few additional steps to set up unit tests.
 
-## React Scripts
-
-### Install Jest
-
-If your React project uses `react-scripts`, then Jest is already installed. You can confirm the version of Jest by running:
-
-```bash
-npm ls jest
-```
-
-Ionic recommends `react-scripts@5` and requires a minimum version of `jest@27`, which includes `jsdom@16`. If you are using an older version of `react-scripts`, you can update it by running:
-
-```bash
-npm install react-scripts@latest
-```
-
 ### 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.
@@ -38,46 +22,19 @@ Ionic React requires the `setupIonicReact` function to be called before any test
 
 In `src/setupTest.ts`, add the following code:
 
-```tsx title="src/setupTest.ts"
-import { setupIonicReact } from '@ionic/react';
-
-setupIonicReact();
-```
-
-### Mock `requestAnimationFrame`
-
-Either in `src/setupTest.ts` or in the individual test file, add the following code before any tests run:
-
-```tsx title="src/setupTest.ts"
-beforeEach(() => {
-  jest.useFakeTimers();
-  jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
-});
-
-afterEach(() => {
-  window.requestAnimationFrame.mockRestore();
-  jest.clearAllMocks();
-});
-```
-
-:::note
+```diff
+import '@testing-library/jest-dom/extend-expect';
 
-This is required if your application is using features such as `useIonModal` or `useIonPopover`.
++ import { setupIonicReact } from '@ionic/react';
 
-:::
++ setupIonicReact();
 
-### Test Environment
-
-Ionic requires a DOM environment to be available in order to render components. This is typically provided by the `jsdom` test environment. In Jest 27 and later, the default environment is `node`.
-
-To configure this behavior, update your `test` command to include `--env=jsdom`:
-
-```json title="package.json"
-"test": "react-scripts test --env=jsdom --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
+// Mock matchmedia
+window.matchMedia = window.matchMedia || function () {
+  return {
+    matches: false,
+    addListener: function () { },
+    removeListener: function () { }
+  };
+};
 ```
-
-:::note
-
-Starting in Ionic v6, the `--transformIgnorePatterns` flag is required.
-
-:::