JestでVueのコンポーネントテストを実装していますが、うまくいかない部分があったので、質問させていただきます。
AppPageは親コンポーネントで、テキストを入力し&ボタン押す→API通信→v-if=show以下のコンポーネント表示と言う流れになっておりますが、テスト実装においてはうまくいきません。
おそらくテストコードにおいて非同期通信ができていないと考えておりますが、改善策がわかりません。
Jestやvue test utilsに詳しい方ご教授いただきたいです。
vue
1import { shallowMount } from '@vue/test-utils' 2import AppPage from '../AppPage.vue' 3import WordRanking from '../WordRanking.vue' 4import InputWord from "../InputWord.vue"; 5 6describe('AppPage.vue',()=>{ 7 const wrapper = shallowMount(AppPage) 8 9 it('コンポーネント描画テスト', () => { 10 expect(wrapper.find('.app-page').exists()).toBeTruthy() 11 }) 12 13 //問題部分 14 it('イベントテスト', () => { 15 wrapper.findComponent(InputWord).vm.$emit('click','test用キーワード') 16 expect(wrapper.findComponent(WordRanking).exists()).toBeTruthy() //falseになる 17 }) 18 19}) 20
vue
1<template> 2 <div class="app-page"> 3 <h1>VueApp</h1> 4 <InputWord @click="receiveData"/> 5 <div id="result" v-if="show"> 6 <WordRanking :ranking="ranking"/> 7 <BarGraph :ranking="ranking"/> 8 </div> 9 </div> 10</template> 11 12<script lang="ts"> 13import { Component, Vue } from "vue-property-decorator"; 14import Methods from '../server/methods'; 15import WordRanking from "@/components/WordRanking.vue"; 16import InputWord from "@/components/InputWord.vue"; 17import BarGraph from "@/components/BarGraph.vue"; 18 19@Component({ 20 components: { 21 InputWord,WordRanking,BarGraph 22 } 23}) 24 25export default class AppPage extends Vue { 26 public show = false; 27 public ranking = []; 28 29 private async receiveData(input:string){ 30 console.log("aaaaaa") //試しに書いてみたがテスト実行時ちゃんと表示される 31 if(!input){ 32 alert("キーワードを入力してください"); 33 }else if(input.length > 64){ 34 alert("検索文字数が多すぎます"); 35 }else{ 36 console.log("aaaaaa") //ここも表示される 37 const response = await Methods.sendParams(input); 38 console.log("aaaaaa") //ここは表示されない 39 this.ranking = response.data; 40 if(Object.keys(this.ranking).length===0){ 41 alert("商品が見つかりませんでした"); 42 }else{ 43 this.show = true; 44 } 45 } 46 } 47} 48</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。