글로벌 스토어를 가져올 때 getter의 일부만 조롱합니다.

글로벌 스토어를 가져올 때 getter의 일부만 조롱합니다.

글로벌 스토어에서 getter를 조롱할 수 있는지 알고 계십니까?

이 코드를 시도했지만 작동하지 않습니다.

import store from '@/store';
import Vuex from "vuex";

const localVue = createLocalVue();
localVue.use(VueRouter);
localVue.use(Vuex);

const wrapper = mount(App, {
      mocks: {
        $store: {
          getters: {
            isLoggedIn: () => true // This is always returning false. I need this getter to return true value
          },
        }
      },
      store, // this is the global store for my application
      localVue,
      router,
    });

그냥 쓰는 게 훨씬 편할 거야mocks호출하지 않고 구성 요소를 마운트하는 동안 속성localVue.use(Vuex)작성하지 않고store인스턴스:

const wrapper = mount(App, {     
  localVue,
  router,
  mocks: {
    $store: {
      getters: {
        isLoggedIn: () => () => true,
      }
    } 
  }
});

여기 Vue 테스트 핸드북의 예에서 영감을 얻어 문제를 해결했습니다.

import * as otherNameThanStore  from '@/store'; // we need to change the name to anyone other than store
import Vuex from "vuex";

const localVue = createLocalVue();
localVue.use(VueRouter);
localVue.use(Vuex);

const store = new Vuex.Store( // attribute name must be store, otherwise typescript will throw this error: is not assignable to parameter of type 'FunctionalComponentMountOptions<Vue>'
  {
  state: {
    ...otherNameThanStore.default.state
  },
  getters: {
    ...otherNameThanStore.default.getters,
    isLoggedIn: (state) => () => true,
  },
}
)

const wrapper = mount(App, {     
      store,
      localVue,
      router,
    });

다른 사람에게 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/68571498/mocking-just-part-of-getters-when-importing-the-global-store