🌮 부모컴퍼넌트에 Video 태그가 있는 경우의 단위테스트

🍟 컴퍼넌트 구조

videoTestView에서 재생버튼을 누르면, mainLayout.vue에서 Video태그를 호출한다.

이렇게 관리되는 이유는 Video태그가 다른 화면에서 관리되기 때문인데,

이렇게 구조를 만들면, videoTestView에서 단위테스트 실시할 경우, mainLayout을 가져올 수 없기 때문에 

에러가 발생한다.

단위테스트 실시하는 경우 videoTestView에서 재생버튼을 호출하면, video 태그가 존재하지 않기 때문에 오류가 발생한다.

 

그리하여, createElement를 이용하여, video를 생성하고, video객체를 세팅해준다.

import { shallowMount, createLocalVue } from "@vue/test-utils";
import Plugins from '@/plugins/Plugins';
import videoTestView from '../../videoTestView.vue';
import { videoObject } from "@/utils/video"
describe('Name of the group', () => {
  let wrapper = null;
  beforeEach(async () => {
   /* 1.createElement을 이용하여 video 객체 생성 */
    const video = document.createElement('video');
    video.setAttribute("id", "global_video")
    const localVue = createLocalVue();
    localVue.use(Plugins);
    /* 2.video객체를 이용하여, video 인스턴스 세팅 */
    videoObject.setVideo(video)
    wrapper = shallowMount(videoTestView, {
      localVue
    })
  });
  test('재생시작 ', async () => {
    const btn = wrapper.find("#playbtn");
    btn.trigger('click')
  });
});

 

위와 같이 세팅 할 경우 새로운 오류가 발생하였다.

"Not implemented: HTMLMediaElement.prototype.play"  가 발생하였는데, HTMLVideoElement 은 HTMLMediaElement를 상속받는건데, 상속받지 못하였다는 오류가 발생하였다. 

 

그리하여 새롭게 아래 코드를 추가하였다.

여기서 "mockResolvedValue" 를 사용 한 것은 video play가 Promise이기 때문에, then을 받아야 하기 때문이다.

 test('재생시작 ', async () => {
    jest.spyOn(window.HTMLMediaElement.prototype, 'play')
      .mockResolvedValue(() => { });
    const btn = wrapper.find("#playbtn");
    btn.trigger('click')
  });

 

위 코드를 추가 함으로써 테스트를 성공하였다.