Vue3最新機能のdefineModelをVitestで検証
2023年12月にリリースされたVue 3.4で、defineModelの安定版が公開されました。今回はdefineModelを使用したコンポーネントをVitestで検証する方法を解説します。
概要
以下のようなログイン画面を作成し、赤枠部分を子コンポーネント化します。UserID、Passwordは親コンポーネントとv-modelで双方向バインドしており、子コンポーネントをVitestで検証します。リポジトリはこちら。
1. 各コンポーネントの定義
親コンポーネント - LoginView.vue
v-model:user-id、v-model:passwordで定義したrefオブジェクトを設定しています。
<script setup>
import { ref } from 'vue'
import LoginItem from '../components/LoginItem.vue'
import ShowInput from '../components/ShowInput.vue'
const userId = ref('')
const password = ref('')
</script>
<template>
<main>
<h1>ログイン</h1>
<LoginItem v-model:user-id="userId" v-model:password="password" style="margin-bottom: 20px;" />
<ShowInput :user-id="userId" :password="password"/>
</main>
</template>
子コンポーネント - LoginItem.vue
子コンポーネントでは親から受け取ったuserId、passwardをinput要素に設定しています。
<script setup>
const userId = defineModel('userId')
const password = defineModel('password')
</script>
<template>
<table>
<tbody>
<tr>
<td>
UserID
</td>
<td>:</td>
<td>
<input v-model="userId" type="text"/>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>:</td>
<td>
<input v-model="password" type="Password">
</td>
</tr>
</tbody>
</table>
</template>
2. spec定義
テスト仕様 - LoginItem.spec.js
specではprops及び、emitされた時にpropsの各値に反映するための処理を定義する必要があります。emit反映処理は各propsの後に指定します。
以下の例では、UserIDとPasswordの入力フィールドにそれぞれ'MyUserId'、'MyPassword'を設定し、propsに変更が反映されていることを検証しています。
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import LoginItem from '../LoginItem.vue'
describe('Login', () => {
it('renders LoginItem', async () => {
const wrapper = mount(LoginItem, {
props: {
userId: 'initialUserId', 'onUpdate:userId': (e) => wrapper.setProps({ userId: e }),
password: 'initialPassword', 'onUpdate:password': (e) => wrapper.setProps({ password: e })
}
})
const inputUserId = wrapper.find('input[type="text"]')
await inputUserId.setValue('MyUserId')
const inputPassword = wrapper.find('input[type="password"]')
await inputPassword.setValue('MyPassword')
expect(wrapper.props('userId')).toEqual('MyUserId')
expect(wrapper.props('password')).toEqual('MyPassword')
})
})
3. 参考リポジトリ&実行手順
最後に、上記のサンプルコードはリポジトリで公開していますので、ローカル環境で実行する手順を記載します。
①下記リポジトリをクローン
https://github.com/kz-oshiro/vue-ex-definemodel-vitest/tree/main
クローン方法は下記の記事を参考にしてください。
②コマンド実行
初回は下記のコマンドでnpmからパッケージをインストールします。
npm i
画面を表示する場合は下記のコマンドを実行してhttp://localhost:5173にアクセスします。
npm run dev
vitestを実行する場合は下記のコマンドを実行します。
npx vitest --ui
vitest実行については下記の記事も参考にしてください。
今回はここまでになります。読んで頂きありがとうございました。