前提
Vue.jsのテストをjestで書いています。
ボックスのテストを書いているのですが、うまくいかないので教えていただきたいです
実現したいこと
以下2項目のテストを組みたいです
- チェック済みの状態でchangeが発火したとき- にチェックが外れているかどうか
- 未チェックの状態でchangeが発火したときにチェックされているかどうか
発生している問題・エラーメッセージ
jestのexpectに記述する内容がわかりません……
該当のソースコード
vue.js
1<template> 2 <label> 3 <input :checked="checked" type="checkbox" @change="onChange" /> 4 <slot /> 5 </label> 6</template> 7 8<script lang="ts"> 9import { defineComponent } from 'vue-demi' 10 11export default defineComponent({ 12 props: { 13 checked: { 14 type: Boolean, 15 } 16 }, 17 18 emits: [ 19 'change', 20 ], 21 22 setup(_, { emit }) { 23 const onChange = (event: Event) => { 24 emit('change', event.currentTarget.checked) 25 } 26 27 return { 28 onChange, 29 } 30 }, 31}) 32</script>
jest
1import { shallowMount, Wrapper } from '@vue/test-utils' 2import Vue from 'vue' 3 4import CheckBox from '@/lib-components/CheckBox.vue' 5 6describe('CheckBox.vue', () => { 7 let wrapper: Wrapper<Vue> 8 beforeEach(() => { 9 wrapper = shallowMount(CheckBox, { 10 slots: { 11 default: 'CheckBox', 12 }, 13 }) 14 }) 15 afterEach(() => { 16 wrapper.destroy() 17 }) 18 test('未チェックの状態でchangeが発火したときにチェックされているかどうか', async () => { 19 await wrapper.find('input').setChecked(false) 20 wrapper.find('input').trigger('change') 21 expect(wrapper.emitted().change).toBeTruthy() 22 }) 23 test('チェック済みの状態でchangeが発火したときにチェックが外れているかどうか', async () => { 24 await wrapper.find('input').setChecked(true) 25 wrapper.find('input').trigger('change') 26 expect(wrapper.emitted().change).toBeFalsy() 27 }) 28}) 29
試したこと
vue.jsのcheckedをget/setを用いた形に変更(うまくいかずに頓挫しました…)
jestのexpect内に記述を下記に変える
wrapper.props().checked
wrapper.find(
[data-testid="${testId}"]).checked
あたりを試しました
教えていただけると助かります、よろしくお願いいたします

あなたの回答
tips
プレビュー