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実行については下記の記事も参考にしてください。

今回はここまでになります。読んで頂きありがとうございました。