最佳实践

测试模板需要 IonApp

在您的测试模板中，当使用 React Testing Library 渲染时，您必须将您的组件包装在 IonApp 组件中。这是为了使组件正确渲染所必需的。

Example.test.tsx

import { IonApp } from '@ionic/react';
import { render } from "@testing-library/react";

import Example from './Example';

test('example', () => {
  render(
    <IonApp>
      <Example />
    </IonApp>
  );
  ...
});

使用 user-event 进行用户交互

React Testing Library 建议使用 user-event 库来模拟用户交互。该库比 React Testing Library 提供的 fireEvent 函数提供了更真实的模拟用户交互。

Example.test.tsx

import { IonApp } from '@ionic/react';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import Example from './Example';

test('example', async () => {
  const user = userEvent.setup();

  render(
    <IonApp>
      <Example />
    </IonApp>
  );

  await user.click(screen.getByRole('button', { name: /click me!/i }));
});

有关 user-event 的更多信息，请参阅 user-event 文档。