Skip to main content

最佳实践

🌐 Best Practices

测试模板需要 IonApp​

🌐 IonApp is required for test templates

在使用 React 测试库渲染你的测试模板时，你必须用 IonApp 组件封装你的组件。这是组件正确渲染所必需的。

🌐 In your test template when rendering with React Testing Library, you must wrap your component with an IonApp component. This is required for the component to be rendered correctly.

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 用于用户交互​

🌐 Use user-event for user interactions

React 测试库建议使用 user-event 库来模拟用户交互。这个库比 React 测试库提供的 fireEvent 函数提供了更真实的用户交互模拟。

🌐 React Testing Library recommends using the user-event library for simulating user interactions. This library provides a more realistic simulation of user interactions than the fireEvent function provided by React Testing Library.

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 文档。

🌐 For more information on user-event, see the user-event documentation.

目录