Vue 애플리케이션에서 중첩된 작업을 테스트하려면 어떻게 해야 합니까?

Vue 애플리케이션에서 중첩된 작업을 테스트하려면 어떻게 해야 합니까?

테스트 프레임워크로서 Jest를 사용하는 TypeScript 기반의 Vue 프로젝트가 있습니다.테스트하려는 모듈에 액션이 있습니다.

내 동작은 다음과 같습니다.

  @Action({})
  saveSomeData (payload: any): Promise<any> {
    const { isActive, id, routes } = payload
    return this.context.dispatch('otherModule/createId', '', { root: true })
        .then((id: string) => {
          payload = { isActive, id, routes, type: 'postRoutes' }
          return this.context.dispatch('submitRoutes', payload)
        })
  }

  @Action({})
  submitRoutes (payload: any): Promise<any> {
    const { isActive, id, routes, type } = payload
    return ActiveService.setActive(id)
        .then(() => this.context.dispatch(type, { id, routes }))
  }

테스트는 다음과 같습니다.

// Mocking createId in otherModule module to return ID
jest.mock('@/store/modules/otherModule', () => ({
  createId: jest.fn(() => Promise.resolve([
    {
      id: 'someId'
    }
  ]))
}))

...

describe('Testing save MyModule data', () => {
    let store: any

    beforeEach(() => {
      store = new Vuex.Store({
        modules: {
          myModule,
          otherModule
        }
      })
    })

    test('Should call createId and then call submitRoutes if ID is empty', async () => {
      const payload = {
        isActive: true,
        id: '',
        routes: []
      }
      const pld = {
        isActive: true,
        id: 'someId',
        routes: [],
        type: 'postRoutes'
      }

      store.dispatch = jest.fn()
      await store.dispatch('myModule/saveSomeData', payload)
      expect(store.dispatch).toHaveBeenCalledWith('myModule/saveSomeData', payload)
      expect(store.dispatch).toHaveBeenCalledWith('otherModule/createId') // <-- here I get an error
      expect(store.dispatch).toHaveBeenCalledWith('myModule/submitRoutes', pld)
    })
  })

문제:내 시험은 실패했는데, 나는 아직 성공할 방법을 찾지 못했어.

오류:

Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "otherModule/createId"
Received: "myModule/saveSomeData", {"id": "", "isActive": true, "routes": []}

Number of calls: 1

내가 시도한 것

저는 제스트와 함께 Vuex 문서를 팔로우했습니다.인터넷에서 다른 솔루션을 시도했습니다만, 안타깝게도 성공하지 못했습니다.

어떤 도움이라도 주시면 감사하겠습니다.

store.dispatch = jest.fn()디스패치 기능을 no-op으로 합니다.콜을 하지 않을 것으로 예상됩니다.saveSomeData그 때문에, 다른 액션을 디스패치 합니다.

이 어설션은 기본적으로 이전 행을 테스트하기 때문에 유용하지 않습니다.

expect(store.dispatch).toHaveBeenCalledWith('myModule/saveSomeData', payload)

store.dispatch스파이나 스텁은 영향을 미치지 않아야 한다context.dispatch컨텍스트가 스토어 초기화 시 생성되고 이미 원본이 사용되므로 액션에 사용됩니다.dispatchVuex 자체가 아니라 테스트할 필요가 있는 액션이기 때문에 이 작업은 불필요할 수 있습니다.

모듈 수준에서 액션을 감시할 수 있습니다.jest.mock그리고.jest.requireActual또는 필요에 따라 Vuex 모듈오브젝트에 로컬로 접속합니다.모듈 스파이 및 모크는 최상위 수준에서 발생합니다.오브젝트 스파이 및 모크는 스토어 인스턴스화 전에 실행해야 합니다.

이 경우 테스트된 유닛은 다음과 같습니다.myModule행동들,ActiveService.setActive그리고.otherModule/createId다른 단위로 간주될 수 있으므로 조롱해야 한다.한다면postRoutes부작용도 있고 조롱도 받을 수 있습니다.

jest.spyOn(otherModule.actions, 'createId');
jest.spyOn(ActiveService, 'setActive');
store = new Vuex.Store(...)

...

otherModule.actions.createId.mockValue(Promise.resolve('stubbedId'));
ActiveService.setActive.mockValue(Promise.resolve());
await store.dispatch('myModule/saveSomeData', payload)
// assert otherModule.actions.createId call
// assert ActiveService.setActive call
// assert otherModule.actions.postRoutes call

언급URL : https://stackoverflow.com/questions/61119074/how-to-unit-test-nested-actions-in-a-vue-application