Viteを使用したコンポーネントテスト
概要
Nightwatchでのコンポーネントテストは、vite-plugin-nightwatchプラグインを基に構築されています。このプラグインは、Viteを使用しているプロジェクトで使用できます。
Viteとは？
Viteは、最新のWebアプリケーション向けの非常に高速なビルドツールであり、当初はVue.jsアプリ用に作成されましたが、現在はReactやその他のUIフレームワークもサポートしています。Viteはフランス語で「速い」という意味で、利用可能なフロントエンドビルドツールの中で、Viteが最速であり、最も使いやすいビルドツールの1つであることから適切です。
BabelやWebpackのようなツールを使用したことがある場合は、ビルド設定の複雑さや起動時間の遅さから発生する問題に精通しているかもしれません。Viteは、設定済みのツールを提供し、ES Modulesを直接処理するための最新ブラウザの新機能を活用することで、これらの問題をすべて解消することに成功しました。そのため、Babelのようなツールを使用する必要はありません。
さらに、ViteはJavascriptコードと関連アセットのバンドルにESBuildを内部で使用しており、これは非常に高速であるようです。
インストール
ステップ1.
Viteプラグインは、NPMからインストールできます。
ステップ2.
プロジェクトで@nightwatch/reactまたは@nightwatch/vueをすでに使用している場合は、このステップをスキップしてください。NightwatchはViteプラグインを自動的にロードします。それ以外の場合は、Nightwatchの設定を更新し、プラグインをリストに追加してください。
module.exports = {
plugins: ['vite-plugin-nightwatch']
}
ステップ3.
Viteの設定を更新します。
import { defineConfig } from 'vite'
import nightwatchPlugin from 'vite-plugin-nightwatch'
export default defineConfig({
plugins: [
// ... other plugins, such as vue() or react()
nightwatchPlugin()
]
})Nightwatchは、Vite開発サーバーがすでに実行されており、ベースURLとしてhttps://:3000を使用することを前提としています。これは、nightwatch.conf.jsでlaunchUrlまたはbaseUrlプロパティを設定することで変更できます。
Vite開発サーバーを起動するには、プロジェクトで以下を実行します。
プラグインオプション
このプラグインは、いくつかの構成オプションを受け入れます。
- componentType
テストするコンポーネントのタイプを指定します。使用可能な値は次のとおりです。
vue(デフォルト、指定がない場合)react
export default {
plugins: [
// ... other plugins, such as vue() or react()
nightwatchPlugin({
componentType: 'vue'
})
]
}
- renderPage
使用するカスタムテストレンダラーへのパスを指定します。デフォルトのレンダラーはVueおよびReactコンポーネントの両方に対してパッケージに含まれていますが、このオプションでその値を上書きできます。
export default {
plugins: [
// ... other plugins, such as vue() or react()
nightwatchPlugin({
renderPage: './src/test_renderer.html'
})
]
}
APIコマンド
このプラグインは、テストの記述中に使用できるいくつかのNightwatchコマンドを提供します。
- browser.mountVueComponent(componentPath,[options],[callback])
パラメーター
componentPath– マウントするコンポーネントファイル(.vue)の場所options– 以下を含めることができますcallback– コンポーネント要素を使用して呼び出されるオプションのコールバック関数
例
const component = await browser.mountVueComponent('../../../src/components/Form.vue', {
plugins: {
store: '../../../src/lib/store.js',
router: '../../../src/lib/router.js'
},
mocks: {
'/api/get-user': {
type: 'fetch',
body: {
data: {
"firstName": "Jimmy",
"lastName": "Hendrix"
}
}
}
}
})
- browser.mountReactComponent(componentPath,[props],[callback])
パラメーター
componentPath– マウントするコンポーネントファイル(.jsx)の場所props– Reactコンポーネントに渡されるプロパティ。これはJSONにシリアル化されます。callback– コンポーネント要素を使用して呼び出されるオプションのコールバック関数
例
const component = await browser.mountReactComponent('../../../src/components/Form.jsx')- browser.launchComponentRenderer()
これはbrowser.navigateTo('/nightwatch/')を呼び出し、ブラウザを開きます。使用する場合は、.importScript()コマンドの前に使用する必要があります。
また、実行時にlaunchUrlをグローバルとして設定すると、使用されるURLは${browser.globals.launchUrl}/nightwatchになり、起動URLを動的に設定できます。
- browser.importScript(scriptPath,[options],[callback])
パラメーター
scriptPath– コンポーネントをレンダリングするページに注入するスクリプトファイルの場所。ESM形式で記述する必要があります。options– 以下を含めることができますscriptType:<script>タグに設定するtype属性 (デフォルトはmodule)componentType:vueまたはreact(デフォルトはvue)
callback– コンポーネント要素を使用して呼び出されるオプションのコールバック関数
例
const formComponent = await browser
.launchComponentRenderer()
.importScript('../../../test/lib/scriptToImport.js');
例 scriptToImport.js
import {mount} from '../../../node_modules/@vue/test-utils/dist/vue-test-utils.esm-browser.js'
import Component from '../../../test/components/vue/Form.vue'
let element = mount(Component, {
attachTo: document.getElementById('app'),
global: {
plugins: []
}
});
// This will be used by Nightwatch to inspect properties of this component
window['@@component_element'] = element;