💿 부모컴퍼넌트에서 emit 테스트

🪄  자식컴퍼넌트  && 부모컴퍼넌트 작성

내용은 간단하다. 자식컴퍼넌트에서 send-data를 호출하면, 부모컴퍼넌트에서 데이터를 받아서 alert을 띄어주는 것이다.

자식컴퍼넌트

<template>
  <div>
    <button @click="sendData">버튼</button>
  </div>
</template>
<script>
export default {
  name: 'Vue2EditorconfigPlayerChildComp',
  emits: ['send-data'],
  data() {
    return {}
  },

  mounted() {},

  methods: {
    sendData() {
      this.$emit('send-data', '데이터를 전송합니다.')
    }
  }
}
</script>

 

부모컴퍼넌트

<template>
  <div>
    <player-child ref="child1" v-if="isShow" @send-data="onSendData" />
    <button ref="btn1" @click="isShow = !isShow">버튼</button>
  </div>
</template>
<script>
import PlayerChildComp from '@/components/PlayerChildComp.vue'
export default {
  name: 'Vue2EditorconfigPlayerView',
  components: {
    'player-child': PlayerChildComp
  },
  data() {
    return {
      isShow: false
    }
  },

  mounted() {},

  methods: {
    onSendData(text) {
      alert(text)
    }
  }
}
</script>
<style scoped></style>

 

🥏  테스트 코드 작성

테스트 케이스는 2가지이다.

• 버튼을 클릭하면 자식 컴퍼넌트를 호출한다
• 자식 컴퍼넌트에서 데이터를 전송하고 alert을 띄운다

여기서 자식 컴퍼넌트의 emit을 호출 하기 위해서는 "findComp.vm.$emit('send-data', '성공하셨습니다')"  부분이 필요하다.

그리고 window.alert 같은 경우에는 window.alert = jest.fn()을 통해 가짜로 구현해준다.

import { shallowMount } from '@vue/test-utils'
import playerView from '@/views/mainLayout/playerView.vue'
describe('PlayerView', () => {
  let wrapper = null
  beforeEach(() => {
    wrapper = shallowMount(playerView)
  })
  test('버튼을 클릭하면 자식 컴퍼넌트를 호출한다 ', async () => {
    const btn = wrapper.findComponent({ ref: 'btn1' })
    await btn.trigger('click')
    const findComp = wrapper.findComponent({ ref: 'child1' })
    expect(findComp.exists()).toBeTruthy()
  })

  test('자식 컴퍼넌트에서 데이터를 전송하고 alert을 띄운다', async () => {
    window.alert = jest.fn()
    await wrapper.setData({
      isShow: true
    })
    const findComp = wrapper.findComponent({ ref: 'child1' })
    await findComp.vm.$emit('send-data', '성공하셨습니다')
    expect(window.alert).toBeCalledWith('성공하셨습니다')
  })
})