Nightwatch でのコンポーネントテストのデバッグ
概要
Nightwatch でのコンポーネントテストのデバッグは、Nightwatch がコンポーネントをレンダリングするためのコードをブラウザに挿入する必要があるため、通常の Node.js アプリケーションやサービスのデバッグほど簡単ではありません。
しかし、Nightwatch v2.4 以降、ブラウザの開発者ツールコンソールを使用してマウントされたコンポーネントを検査およびデバッグするためのいくつかの方法を提供しています。
コンポーネントのプレビュー
Nightwatch は、プレビューモード（--preview CLI 引数を使用）でコンポーネントテストを実行する機能を提供します。これにより、Vite テストレンダラーのみが開き、実行が無期限に一時停止します。
これは、Vite レンダラーに組み込みのホットモジュール置換 (HMR) 機能によってコンポーネントを自動的に再ロードする機能があるため、開発中に役立ちます。
Nightwatch の組み込み並列処理を使用して、Firefox と Chrome の両方でストーリーを開くことができます。
コンポーネントのデバッグ
ストーリーのプレビューに加えて、Nightwatch を使用してストーリーをデバッグすることもできます。方法は次のとおりです。
--debugと--devtoolsCLI フラグを渡します。これにより、コンポーネントがレンダリングされた直後に.debug()コマンドが挿入されます。play()関数内にブレークポイントを追加するために、debuggerステートメントを使用します。
例 (React)
次の例では、debugger を使用して、ブラウザの開発者ツールを使用して play() 関数をデバッグします。この機能は現在、Chrome、Edge、Safari で利用できます。
この例は、@nightwatch/storybook プラグインがインストールされた Storybook プロジェクトに基づいています。詳細については、Storybook 統合 ページを参照してください。
import { userEvent, within } from '@storybook/testing-library';
import Form from './Form.jsx';
export default {
title: 'Form',
component: Form,
}
const Template = (args) => <Form {...args} />
// Component story for an empty form
export const EmptyForm = Template.bind({});
// Component story simulating filling in the form
export const FilledForm = Template.bind({});
FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
debugger;
// 👇 Simulate interactions with the component
await userEvent.type(canvas.getByTestId('new-todo-input'), 'outdoors hike');
await userEvent.click(canvas.getByRole('button'));
};
FilledForm.test = async (browser, { component }) => {
// 👇 Run commands and assertions in the Nightwatch context
await expect(component).to.be.visible;
}
例を実行し、Chrome デベロッパーツールコンソールでブレークポイントを確認します。
統合されたデバッグコンソール を使用して、Nightwatch からコマンドを発行することもできます。