テスト

このドキュメントは、@ionic/vueで作成されたアプリケーションをテストする方法の概要を提供します。Ionic CLI で生成されたアプリケーションは、VitestおよびVue Test Utilsによるユニットテストのセットアップがされており、Playwrightによるエンドツーエンドテストにも対応しています。

Unit tests live in tests/unit and end-to-end tests live in tests/e2e.

The generated package.json includes scripts for running them:

Script	Description
npm test	Runs the unit tests once, then the end-to-end tests.
npm run test:unit	Runs the unit tests once.
npm run test:unit:watch	Runs the unit tests and re-runs them when files change.
npm run test:e2e	Runs the end-to-end tests, starting the dev server for them.

note

Playwright downloads its browsers separately from the npm package. Run npx playwright install once before running the end-to-end tests for the first time.

ユニットテスト

コンポーネントの待機

Ionic コンポーネントの DOM に対してアサーションを行う前にレンダリングを待つ必要がある場合は、@ionic/coreからエクスポートされるcomponentOnReadyヘルパーを使用してください。el.componentOnReady()を直接呼び出さないでください。@ionic/vueは Stencil のカスタム要素ビルドを使用しており、このメソッドは要素上には存在しません。このヘルパーは代わりに 1 フレーム待機し、コンポーネントの内部コンテンツがレンダリングされる機会を与えます。

import { componentOnReady } from '@ionic/core';
import { mount } from '@vue/test-utils';
import { expect, test } from 'vitest';

import Example from './Example.vue';

test('renders the submit button', async () => {
  const wrapper = mount(Example);

  const button = wrapper.find('ion-button').element;

  await new Promise<void>((resolve) => componentOnReady(button, () => resolve()));

  expect(button.textContent).toContain('Submit');
});