ViTest를 사용한 Vue 구성요소 단위 테스트 및 모의 방법에 대한 방법 가이드

Question

vitest를 사용하여 메서드 및 단위 테스트 vue 구성 요소를 시뮬레이션합니다.

MyComponent.vue

<스크립트 설정>
"vue"에서 { ref } 가져오기;;

const isSelectAll = ref(true);
const selectAllModel = ref(false);

const onChange = () =>
    isSelectAll.value = true;
    selectAllModel.value = false;
};
const onVisibleChange = () =>
  // 전화 이외의 작업 수행
  onChange();
};

<p><code>onChange</code>를 모의하여 <code>onVisibleChange</code> 메소드를 단위 테스트하고 <code>onChange</code> </p>
<p><em>MyComponent.spec.js</em></p>
<pre class="brush:php;toolbar:false;">'vitest'에서 { 마운트 } 가져오기;
'vue'에서 { ref } 가져오기;
'./MyComponent.vue'에서 MyComponent를 가져옵니다.

explain('MyComponent', () => {
  const 래퍼 =shallowMount(MyComponent);
  const spy = vi.spyOn(wrapper.vm, 'onChange');
  래퍼.vm.onVisibleChange();
  기대(spy).toHaveBeenCalled();
  기대(wrapper.vm.onChange).toHaveBeenCalled();
  // 두 가지 모두 오류가 발생합니다. AssertionError: 예상되는 "onChange"

  //또한 시도했습니다
  const mock = vi.fn();
  Wrapper.vm.onChange = 모의;
  래퍼.vm.onVisibleChange();
  Expect(mock).toHaveBeenCalled(); // AssertionError: "spy"가 한 번 이상 호출될 것으로 예상됩니다.
  Expect(wrapper.vm.onChange).toHaveBeenCalled(); // TypeError: [Function onChange]는 스파이 또는 스파이에 대한 호출이 아닙니다!
})

Answer 1

테스트 방법은 좋은 생각이 아닙니다. 왜냐하면 함수의 이름이 바뀔 수 있기 때문입니다.

더 좋은 방법은 테스트하는 것입니다:

1. 구성요소에서 발생하는 이벤트. 어쩌면 onChange()에 이벤트 방출이 포함될 수도 있습니다. 이 문제는 테스트되어야 합니다.
2. 템플릿 변경. 예를 들어 onChange()는 템플릿을 변경합니다. 따라서 이러한 변경 사항도 테스트해야 합니다.
3. 다른 기능을 호출하세요. 예를 들어 프로젝트 전체에 공통적으로 사용되는 몇 가지 기능이 있습니다. 이러한 기능은 spy.on를 사용하여 테스트할 수 있습니다.