just unit testing을 위해 Vuex 액션을 수정할 수 있습니까?

just unit testing을 위해 Vuex 액션을 수정할 수 있습니까?

테스트 파일에 스토어를 만들었습니다.

import {
shallowMount,
createLocalVue
} from '@vue/test-utils'
import Vuex from 'vuex'
import Actions from '../../../src/components/Actions'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('Actions.vue', () => {
  let actions
  let store

beforeEach(() => {
    actions = {
        actionClick: jest.fn(() => Promise.resolve({}))
    }
    store = new Vuex.Store({
        actions
    })
})

it('should go to then block', () => {
    const wrapper = shallowMount(Actions, {
        store,
        localVue
    })
    //goes to then block
})

it('should go to catch block', () => {
    actions.actionClick = jest.fn(() => Promise.reject(new Error()))
    const wrapper = shallowMount(Actions, {
        store,
        localVue
    })
    //still goes to then block and not the catch block
  })
})

위의 코드에 따르면 두 번째 테스트 블록을 달성할 수 없음은 스토어에서 actionClick 기능을 수정하지 않음을 의미합니다.

그beforeEach후크는 그것이 들어가기 전에 발생합니다.it블록. 그래서 그.store설정이 실제로 완료되었습니다.내가 볼 수 있는 한.vuex소스, 생성 단계에서 전달한 옵션 개체에서 작업 콜백을 분리합니다(store = new Vuex.Store(...)) 여기서 확인하실 수 있습니다.

따라서 새 저장소 개체를 생성하는 것이 좋습니다.it블록:

it('should go to catch block', () => {
    actions.actionClick = jest.fn(() => Promise.reject(new Error()))
    store = new Vuex.Store({ actions })
    const wrapper = shallowMount(Actions, {
        store,
        localVue
    })
    //still goes to then block and not the catch block
  })
})

또는 사용hotUpdate (newOptions)저장 인스턴스의 메서드입니다.저는 이것을 테스트하지 않았습니다.하지만, 다시 말하지만,vuex 출처: 정확히 당신이 필요로 하는 것을 해야 합니다.

it('should go to catch block', () => {
    actions.actionClick = jest.fn(() => Promise.reject(new Error()))
    store.hotUpdate({ actions })
    const wrapper = shallowMount(Actions, {
        store,
        localVue
    })
    //still goes to then block and not the catch block
  })
})

언급URL : https://stackoverflow.com/questions/56043992/can-we-modify-vuex-action-for-jest-unit-testing