$ root가 내 보낸 이벤트에 Vue 구성 요소가 응답하는 것을 어떻게 테스트합니까?

Question

Vue $ root 인스턴스가 내 보낸 이벤트를 수신하는 구성 요소가 있습니다.

export default { 
    data() { 
    return { 
     name: '' 
    } 

    }, 
    methods: { 
    openModal(name) { 
     this.name = name 
    } 
    }, 
    mounted() { 
    this.$root.$on('open-modal', name => { 
     this.openModal(name); 
    }); 
    } 
} 

그리고 나는 그 이벤트를 호출하는 코드가 있습니다.

this.$root.$emit('open-modal', 'some-name'); 

$ root에 해당 이벤트를 호출하고 이벤트가 호출되었다는 것을 알리는 단위 테스트를 작성하려면 어떻게해야합니까? 나는 Vue test utils https://vue-test-utils.vuejs.org/en/을 사용하고 있으며 이벤트를 호출하는 방법을 찾을 수 없습니다.

시도했지만 작동하지 않습니다.

it('sets the modal name on the open-modal event',() => { 
    const wrapper = mount(Modal); 
    wrapper.vm.$root.$emit('open-modal', 'my-modal') 
    expect(wrapper.vm.$data.name).to.equal('my-modal'); 
    }); 

Answer 1

나는 무엇이 잘못되었는지 알아 냈습니다. 나는 사건을 올바르게 내보내고 있었다. 문제는 내 구성 요소가 VueRouter를 사용하고 openModal 메소드에서 $ router.push()를 호출하는 것이 었습니다. 내 테스트에서 VueRouter를 스텁해야했고 모든 것이 잘 작동했습니다. 내 검사가 지금 어떻게 생겼는지.

import { shallow, createLocalVue } from 'vue-test-utils'; 
import VueRouter from 'vue-router'; 
import Modal from '../cw-modal.vue'; 

const localVue = createLocalVue(); 
localVue.use(VueRouter); 


describe('cw-modal component',() => { 
    it('sets visible to true when the "open-modal" even is called with the modalName',() => { 
    const wrapper = shallow(Modal, { 
     propsData: { 
     cwModalName: 'my-modal' 
     }, 
     localVue, 
     router: new VueRouter() 
    }); 

    wrapper.vm.$root.$emit('open-modal', 'my-modal'); 
    expect(wrapper.vm.$data.visible).to.equal(true); 
    }); 
}