Reactコンポーネントのテスト | 開発者ガイド

概要

NightwatchでのReactコンポーネントテストは、公式の@nightwatch/reactプラグインを使用して利用できます。これは、vite-plugin-nightwatchプラグイン上に構築されています。Reactプラグインは内部で独自のVite開発サーバーを管理するため、Viteを使用しているかどうかに関係なく、任意のプロジェクトで使用できます。

インストール

ステップ1。

@nightwatch/reactプラグインは、NPMからインストールできます。

npm install @nightwatch/react

ステップ2。

次に、Nightwatchの構成を更新し、プラグインをリストに追加します。

nightwatch.conf.js

module.exports = {
  plugins: ['@nightwatch/react']
}

ステップ3。

a. Viteを使用しないプロジェクト

@nightwatch/reactプラグインは内部で独自のVite開発サーバーを管理するため、プロジェクトでViteをまだ使用していない場合は、これで完了です（今のところ）。

b. 既にViteを使用している

既にViteプロジェクトがある場合、@nightwatch/reactプラグインは既存のvite.config.jsまたはvite.config.ts（どちらかが見つかった場合）を使用しようとします。プラグインオプションを介して別のVite構成ファイルを指定することもできます（下記参照）。

vite.config.jsを更新し、vite-plugin-nightwatchプラグインを追加します。

vite.config.js

import nightwatchPlugin from 'vite-plugin-nightwatch'


export default {
  plugins: [
    // ... other plugins, such as vue() or react()
    nightwatchPlugin()
  ]
})

テストの作成

JSX + Component Story Formatの使用

バージョン2.4以降、NightwatchはJSXを使用して記述され、Component Story Format（CSF）サブセットで記述されたReactコンポーネントテストの実行をサポートしています。CSFは、オープンスタンダードであり、Storybookによって導入されたES6モジュールに基づいています。

ファイル名は、拡張子として.jsxまたは.tsxを使用する必要があります。最も単純な形式では、コンポーネントテストは次のようになります。

test/sampleTest.jsx

import Form from '../components/Form.jsx';


export default {
  title: 'Form',
  component: Form,
}


export const FormStory = () => <Form />

コンポーネントテストの用語では、「ストーリー」は、propsまたはargsを持つ特定のコンポーネントの表現です。具体的なケースでは、単一のexport const宣言です。

Component Story Formatでのテスト作成の詳細をご覧ください。

JSXなし

このプラグインは、単独で、またオプションで指定されたpropsのセットでコンポーネントをマウントするために使用できるmountComponentコマンドのみを提供します。

.mountComponent(`componentPath`, `[props]`, `[callback]`)

パラメーター

名前	型	componentPath
`componentPath`	`string`	マウントするコンポーネントファイル（`.jsx`）の場所
`props` オプション	`object` \| `function`	Reactコンポーネントに渡すプロパティ。これはJSONにシリアル化されるオブジェクト、またはpropsオブジェクトを返す関数にすることができます。関数はブラウザのコンテキストで実行されます。
`callback` オプション	`function`	コンポーネント要素を使用して呼び出されるオプションのコールバック関数。

構成

@nightwatch/reactプラグインは、適切な構成デフォルトで動作するように設計されていますが、より高度なシナリオでは、構成オプションの一部を変更する必要がある場合があります。

Vite開発サーバー

デフォルトでは、NightwatchはVite開発サーバーを自動的に起動しようとします。nightwatch.conf.jsファイルのvite_dev_serverディクショナリの下に以下を追加することで、それを無効にできます。

これは、@nightwatch/vueプラグインなど、Viteに基づいた他のコンポーネントテストプラグインに共通です。

nightwatch.conf.js

module.exports = {
  plugins: ['@nightwatch/react'],
  vite_dev_server: {
    start_vite: true,
    port: 5173
  }
}

プラグインオプション

プラグインは、プロジェクトの既存のvite.config.jsファイルを使用する場合に設定できるいくつかの構成オプションを受け入れます。

- `renderPage`

使用するカスタムテストレンダラーへのパスを指定します。デフォルトのレンダラーがパッケージに含まれていますが、このオプションはその値を上書きできます。

vite.config.js

export default {
  plugins: [
    // ... other plugins, such as vue() or react()
    nightwatchPlugin({
      renderPage: './src/test_renderer.html'
    })
  ]
}

例

const component = await browser.mountReactComponent('../../../src/components/Form.jsx')

test/sampleTest.js

describe('user info test', function() {
  let component;
  

  before(async () => {
    component = await browser.mountComponent('../../../src/components/UserInfo.jsx', function() {
      return {
        date: new Date(),
        text: 'I hope you enjoy reading Ulysses!',
        author: {
          name: 'Leopold Bloom',
          avatarUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Poldy.png'
        }
      }
    });
  });
  

  it('should render the component without error', function() {
    browser.expect(component).to.be.visible;
  })
})