Vue Test Utils: 구성 요소의 스타벅스화 및 이벤트 발화 방법

개시하다

Vue.js와 Nuxt 프로젝트에서 Vuetify와 Buefy 등을 사용하는 프로그램 라이브러리는 드물지 않습니다.그러나 그런 라이브러리의 구성 요소를 포함하는 파일을 테스트하면'그런 구성 요소가 없습니다'는 오류가 발생합니다.

이런 상황을 피하기 위해 라이브러리 사이트에서도 플러그인을 불러오기 위해 많은 테스트를 한다.Vuetify 문서
하지만 이 방법에는 문제가 있다.

문서의 테스트 설명 예

여기서 우리는'버튼을 누르면 숫자가 증가한다'는 간단한 구성 요소를 예로 들자.

Vuetify 버튼 구성 요소 사용

가능한 한 간단하게 하기 위해 기존 Options API로 기술하고 템플릿 내의 이벤트 처리 프로그램으로 변수의 값을 변경

테스트 시 권한 수여data-test로 요소 확정

<template>
  <div>
    <v-btn data-test="btn" @click="count++">count: {{ count }}</v-btn>
  </div>
</template>

<script>
export default {
  data: () => ({
    count: 0
  })
};
</script>

위의 Vuetify 문서를 참조하여 Jest에서 이 구성 요소에 대한 테스트를 다음과 같이 작성합니다.

// setup.js
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify) // 1. グローバルにプラグイン登録

// テストファイル
import { createLocalVue, mount } from "@vue/test-utils";
import Vuetify from "vuetify";
import App from "@/App.vue";

describe("App.vue", () => {
  const localVue = createLocalVue();
  let vuetify;

  beforeEach(() => {
    vuetify = new Vuetify(); // 2. テストごとに初期化
  });

  it("ボタンをクリックするとカウントが増える", () => {
    const wrapper = mount(App, { // 3. mount 関数を使用
      localVue,
      vuetify
    });

    const btn = wrapper.find(`[data-test="btn"]`);

    // trigger でイベント発火
    btn.trigger("click");

    expect(wrapper.vm.$data.count).toBe(1);
  });
});

이 방법은 몇 가지 의문점이 있다.

테스트는 전역 등록 플러그인에 따라 다름

테스트 용례마다 초기화 처리(테스트 증가 후 무거워짐)

mount 함수이기 때문에 자손 구성 요소 처리를 합니다

계산량 증가로 테스트 시간 연장

서브에서 API를 호출하거나 Vuex를 사용할 경우 이러한 모듈화(테스트 내용과 무관한 코드를 써야 한다. 테스트는 서브의 실현에 달려 있다)

vue-test-utils 가이드shallowMount

도 추천
※ 플러그인을 로컬에서 등록할 수 있는 프로그램 라이브러리도 있습니다. 이 경우 상기 1은 사라집니다.
초기화 처리는 모든 테스트 파일을 대상으로 하는 것이기 때문에 2도 다소 줄어들 것이다.[1]

보존 시 테스트 설명 예

이러한 문제를 해결하고 서브어셈블리를 유지하기 위해 플러그인 로드를 중지합니다.
또한 mount 함수 대신 shallow Mount 함수를 사용하여 서브어셈블리의 구현에 의존하지 않고 테스트 실행 시간을 단축할 수 있습니다.

import { createLocalVue, shallowMount } from "@vue/test-utils";
import App from "@/App.vue";

describe("App.vue", () => {
  const localVue = createLocalVue();

  it("ボタンをクリックするとカウントが増える", async () => {
    const wrapper = shallowMount(App, { // 1. shallowMount に変更
      localVue,
      stubs: { // 2. stubs オプション追加
        "v-btn": true
      }
    });

    const btn = wrapper.find(`[data-test="btn"]`);

    btn.trigger("click");
    expect(wrapper.vm.$data.count).toBe(0); // 3. trigger は効かなくなる（0 のまま）

    btn.vm.$emit("click");
    expect(wrapper.vm.$data.count).toBe(1); // 4. emit すると増える
  });
});

shallowMount 함수로 변경

두 번째 파라미터에stubs공식 문서

추가

스타벅스화되면 trigger 방법이 무효

vm를 호출하는 $emit 방법으로 이벤트를 촉발할 수 있음

총결산

위에서 말한 바와 같이 step화 후 Trigger는 작용하지 않지만 어떻게 해결해야 할지 모르겠습니다. 상당히 긴 시간 동안 검색+시도 오류를 했던 것을 기억합니다.
답을 알았다면 쉬웠겠지만 생각하기 어려웠을 텐데...
다음 버전이 확인되었습니다.

[email protected]

@vue/[email protected]

[email protected] (via @vue/[email protected])

[email protected]

샘플 창고는 여기 있습니다(@vue/[email protected]생성)
https://github.com/jay-es/vue-test-utils-stubs-event
각주localVue.use(Buefy)그렇게 써↩︎