Vue Test Utilsで親コンポーネント側で子コンポーネントのv-modelに正しく値がセットされたかを検証するテスト

背景

久々にv-modelにセットされた値のテストをサクッとしようとしたら、ハマったので、備忘録としてメモしておきます。

結論

v-modelに値がセットされた値は、 wrapper.find(取得したい要素のセレクタ).props("modelValue") で参照可能

親コンポーネント

InputText というコンポーネントを親コンポーネントで利用している状況

<InputText
  v-model="form.name"
  data-testid="name-input"
/>

テスト

const newValue = "hoge";
wrapper.find('[data-testid="name-input"]').vm.$emit("change", newValue);
await wrapper.vm.$nextTick();
expect(wrapper.find('[data-testid="name-input"]').props("modelValue")).toBe(
  newValue
);