Home>

I'm implementing Vue's component testing in Jest, but I have some questions that didn't work.
AppPage is the parent component, and the flow is to enter text and press&button → API communication → v-if = show The following component display, but it does not work in the test implementation.
I think that asynchronous communication is probably not possible in the test code, but I do not know how to improve it.
I would like a professor who is familiar with Jest and vue test utils.

import {shallowMount} from'@ vue/test-utils'
import AppPage from'../AppPage.vue'
import WordRanking from'../ WordRanking.vue'
import InputWord from "../InputWord.vue";
describe ('AppPage.vue', () =>{
    const wrapper = shallowMount (AppPage)
    it ('Component drawing test', () =>{
        expect (wrapper.find ('.app-page'). exists ()). toBeTruthy ()
    })
    // Problem part
    it ('event test', () =>{
        wrapper.findComponent (InputWord) .vm. $emit ('click','test keyword')
        expect (wrapper.findComponent (WordRanking) .exists ()). toBeTruthy () // false
    })
})
<template>
    
         VueApp 
      <InputWord @click = "receiveData" />
        
          <WordRanking: ranking = "ranking" />
          <BarGraph: ranking = "ranking" />
        
    
</template>
<script lang = "ts">
import {Component, Vue} from "vue-property-decorator";
import Methods from'../server/methods';
import WordRanking from "@/components/WordRanking.vue";
import InputWord from "@/components/InputWord.vue";
import BarGraph from "@/components/BarGraph.vue";
@Component ({{
    components: {
        InputWord, WordRanking, BarGraph
    }
})
export default class AppPage extends Vue {
    public show = false;
    public ranking = [];
    private async receiveData (input: string) {
        console.log ("aaaaaa") // I tried to write it, but it is displayed properly when the test is executed
        if (! input) {
            alert ("Enter keyword");
        } else if (input.length>64) {
            alert ("Too many search characters");
        } else {
            console.log ("aaaaaa") // Also displayed here
            const response = await Methods.sendParams (input);
Console.log ("aaaaaa") // This is not displayed
            this.ranking = response.data;
            if (Object.keys (this.ranking) .length == = 0) {
                alert ("Product not found");
            } else {
                this.show = true;
            }
        }
    }
}
</script>