Jest 단위 테스트에서 Vuex 저장소의 복제본을 생성하려고 할 때 "TypeError: 기호 값을 문자열로 변환할 수 없습니다"라는 메시지가 나타나는 이유는 무엇입니까?

Question

작동 중인 Vue 2.6/Vuex 3.6/TypeScript 애플리케이션이 있습니다. 복잡한 리팩토링을 수행하기 전에 몇 가지 단위 테스트를 추가하고 싶습니다. Jest와 Vue Test Utils를 설치하고 구성한 후 공식 Vue Test Utils 가이드에 제공된 지침을 따라해 보았습니다.

다음과 같이 특정 프로젝트에 지침을 적용합니다.

'@vue/test-utils'에서 { createLocalVue } 가져오기
'vue'에서 Vuex 가져오기
'store'에서 매장 가져오기
'lodash'에서 { cloneDeep } 가져오기

test("SET_CURRENT_VTK_INDEX_SLICES는 VTK 인덱스 슬라이스를 업데이트해야 합니다.", () => {
  const localVue = createLocalVue()
  localVue.use(Vuex)
  const store = new Vuex.Store(cloneDeep(storeConfig))
  기대(store.state.iIndexSlice).toBe(0)
  store.commit('SET_CURRENT_VTK_INDEX_SLICES', { indexAxis: 'i', 값: 1 })
})

그러나 npm run test:unit을 실행하면 다음 오류가 발생합니다.

<인용문>

"TypeError: 기호 값을 문자열로 변환할 수 없습니다."

스토어에 기호가 없는 것 같지만 재귀 함수를 사용하여 스토어와 모든 하위 항목을 확인하세요. (기억이 나지 않는 곳에서 이 코드를 훔쳤습니다.):

function findSymbolInStore(store) {
      for (저장소의 const 키) {
        console.log(키);
        if (store.hasOwnProperty(key)) {
          const 값 = 저장소[키];
          if (값 유형 === '객체') {
            if (Symbol의 값 인스턴스) {
              console.log(`발견된 기호: ${key}`);
            } 또 다른 {
              findSymbolInStore(값);
            }
          }
        }
      }
    }

 findSymbolInStore(store.state);

상점에서 기호를 찾을 수 없습니다.

몇 가지 더 막다른 골목에 부딪힌 후 상점을 문자열화하여 기호가 어디에 있는지 확인했습니다.

{를 시도해보세요
 const thisStore = JSON.stringify(store);
} 잡기 (오류) {
  console.error('객체를 문자열로 변환하는 중 오류가 발생했습니다.', err);
}

하지만 다음과 같은 오류가 발생합니다.

<인용문>

유형 오류: 루프 구조를 JSON으로 변환하는 중

그런 다음 평탄화를 사용하여 문자열화를 시도해 보세요.

'평면화'에서 평면화 가져오기;

const stringifyStore = flatted.stringify(store);
const parsedStore = flatted.parse(stringifyStore);

이렇게 하면 한 단계 더 나아갈 수 있을 것 같았는데 이제 다음과 같은 오류가 발생합니다.

<인용문>

TypeError: 정의되지 않은 속성을 읽을 수 없습니다('iIndexSlice' 읽기)

스토어에서 iIndexStore의 기본값이 0인 것을 보니 이상합니다. 고맙게도 이 시점에서 Amit Patel은 iIndexSlice뿐만 아니라 전체 store.state도 정의되지 않았음을 지적하여 올바른 길을 안내했습니다.

제가 겪었던 것과 유사한 오류가 있는 [Vuex GitHub 문제][4]를 우연히 발견했습니다.

<인용문>

[vuex] getter는 함수여야 하지만 'getters.currentView'는 {}

위에 인용된 질문에서 작성자는 스토어를 내보내지 않고 스토어 구성만 내보내도록 권장합니다. 앱 스토어가 실제 스토어 인스턴스를 내보내고 있다는 것을 깨달았습니다. Vuex 저장소 정의는 다음과 같습니다:

const store = new Vuex.Store({
 상태: {
  iIndexSlice: 0,
  // ...
 },
 게터: {
  현재뷰(상태) {
   // 함수 코드 ...
  }
 돌연변이: {
  // 코드
 },
 작업: {
  // 코드
 }
});

기본 저장소 내보내기;

하지만 지금은 어떻습니까?

HT: 상징적 디버깅에 도움을 준 Mujeeb에게.

참고: 막다른 골목 등을 건너뛸 수도 있었지만 다른 사람들도 같은 어려움을 겪을 수 있고 일부 버그 등이 언급되면 답변을 Google에 검색하는 것이 더 쉬울 것이라고 생각했습니다.

Answer 1

("Dave가 이 문제를 해결하는 데 너무 많은 시간을 보냈습니다...아주 사소하지만 같은 실수를 저지를 다른 사람을 구할 수 있기를 바랍니다"의 또 다른 에피소드에 오신 것을 환영합니다:

Vuex 스토어를 다음과 같이 리팩토링했습니다.

으아악

그런 다음 Jest 테스트를 약간 수정해야 했습니다.

으아악

이제 테스트는 문제없이 실행됩니다.