반응형
농담으로 vue 합성 함수를 조롱하는 방법
graphql API를 요청하기 위해 vue2를 컴포지션 API, vuex 및 apollo 클라이언트와 함께 사용하고 있는데 합성 가능한 함수를 조롱할 때 문제가 발생함
// store-service.ts
export function apolloQueryService(): {
// do some graphql stuff
return { result, loading, error };
}
// store-module.ts
import { apolloQueryService } from 'store-service'
export StoreModule {
state: ()=> ({
result: {}
}),
actions: {
fetchData({commit}) {
const { result, loading, error } = apolloQueryService()
commit('setState', result);
}
},
mutations: {
setState(state, result): {
state.result = result
}
}
}
테스트:
// store-module.spec.ts
import { StoreModule } from store-module.ts
const store = StoreModule
describe('store-module.ts', () => {
beforeEach(() => {
jest.mock('store-service', () => ({
apolloQueryService: jest.fn().mockReturnValue({
result: { value: 'foo' }, loading: false, error: {}
})
}))
})
test('action', async ()=> {
const commit = jest.fn();
await store.actions.fetchData({ commit });
expect(commit).toHaveBeenCalledWith('setData', { value: 'foo' });
})
}
커밋이 원래 apolloQueryService의 결과인 ('setData', {value:defined})로 호출되기 때문에 테스트가 실패합니다.내 모크가 작동하지 않는 것 같아.내가 뭘 잘못하고 있나요?도와주셔서 감사합니다!
언급URL : https://stackoverflow.com/questions/67998775/how-to-mock-vue-composable-functions-with-jest
반응형
'programing' 카테고리의 다른 글
size_t의 올바른 printf 형식 지정자: %zu 또는 %Iu? (0) | 2022.08.29 |
---|---|
타이프스크립트:VueX 스토어 모듈을 참조하면 VueJs 2.5에 대한 네임스페이스 오류가 표시됨 (0) | 2022.08.29 |
VueX: 중첩된 객체를 사용하여 스토어를 구성하는 방법 (0) | 2022.08.29 |
lamda 표현식은 실행될 때마다 힙에 개체를 생성합니까? (0) | 2022.08.29 |
C의 이중 포인터 연속성 경고 (0) | 2022.08.29 |