반응형
Vue 구성 요소의 Vuex 돌연변이에 대한 호출을 테스트하는 방법
다음과 같은 방법을 사용하는 vue 구성 요소가 있다고 가정하십시오.
methods:{
doSomething(someParameter){
//maybe do something with that Parameter
this.$store.commit("storeSomething",someParameter);
let someParameter2 = this.transformToSth(someParameter);
this.$store.commit("storeSomethingElse",someParameter2);
}
}
이런 시험이 제이에스에서 통하려면 어떻게 해야 하나?
test("that the commit was correctly called",()=>{
wrapper.vm.doSomething(someParameter);
expect(wrapper.vm.$store.commit).hasBeenCalledWith(someParameter);
expect(wrapper.vm.$store.commit).hasBeenCalledWith(someParameter2);
})
또한 나는 모의도 다시 되돌려서 그 방법이 이전과 동일한 구현을 사용하기를 원한다는 점에 유의한다.그렇지 않으면, 나는 시험 사이에 의존성을 만들게 되는데, 나는 그것을 매우 피하고 싶다.
(또한 행동과 게터 기능에도 동일한 방식으로 작동하기를 바란다)
spyOn으로 해결할 수 있다는 것을 알았다.
test("that the commit was correctly called", () => {
let spy = jest.spyOn(userCardEditingWrapper.vm.$store, "commit");
wrapper.vm.doSomething("test");
expect(spy).toHaveBeenCalledWith("storeSomething", someParameter);
expect(spy).toHaveBeenCalledWith("storeSomethingElse", someParameter2);
});
나에게 jest.fn()으로 힌트를 준 Vue 불협화음 채널의 @devTea에게 크레딧.
반응형
'programing' 카테고리의 다른 글
vuej에서 단위 테스트 (0) | 2022.04.07 |
---|---|
Vue js 자식 구성 요소에서 정의되지 않은 소품.하지만 그 대본에서만 (0) | 2022.04.07 |
useFooController/useFooHook을 통해 useContext를 사용하는 구성 요소의 렌더 제한 (0) | 2022.04.07 |
중복 인덱스로 판다 줄 제거 (0) | 2022.04.06 |
외부 JS 스크립트를 VueJS 구성 요소에 추가하는 방법 (0) | 2022.04.06 |