Jest 단위 테스트에서 Vuex 저장소의 복제본을 생성하려고 할 때 "TypeError: 기호 값을 문자열로 변환할 수 없습니다"라는 메시지가 나타나는 이유는 무엇입니까?
P粉604848588
2023-08-26 16:06:50
<p>작동 중인 Vue 2.6/Vuex 3.6/TypeScript 애플리케이션이 있습니다. 복잡한 리팩토링을 수행하기 전에 몇 가지 단위 테스트를 추가하고 싶습니다. Jest와 Vue Test Utils를 설치하고 구성한 후 공식 Vue Test Utils 가이드에 제공된 지침을 따라해 보았습니다. </p>
<p>다음과 같이 특정 프로젝트에 지침을 적용합니다. </p>
<pre class="brush:js;toolbar:false;">'@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 })
})
</pre>
<p>그러나 <code>npm run test:unit</code>을 실행하면 다음 오류가 발생합니다. </p>
<인용문>
<p>"TypeError: 기호 값을 문자열로 변환할 수 없습니다."</p>
</인용문>
<p>스토어에 기호가 없는 것 같지만 재귀 함수를 사용하여 스토어와 모든 하위 항목을 확인하세요. (기억이 나지 않는 곳에서 이 코드를 훔쳤습니다.): </p>
<pre class="brush:js;toolbar:false;">function findSymbolInStore(store) {
for (저장소의 const 키) {
console.log(키);
if (store.hasOwnProperty(key)) {
const 값 = 저장소[키];
if (값 유형 === '객체') {
if (Symbol의 값 인스턴스) {
console.log(`발견된 기호: ${key}`);
} 또 다른 {
findSymbolInStore(값);
}
}
}
}
}
findSymbolInStore(store.state);
</pre>
<p>상점에서 기호를 찾을 수 없습니다.</p>
<p>몇 가지 더 막다른 골목에 부딪힌 후 상점을 문자열화하여 기호가 어디에 있는지 확인했습니다. </p>
<pre class="brush:js;toolbar:false;">{를 시도해보세요
const thisStore = JSON.stringify(store);
} 잡기 (오류) {
console.error('객체를 문자열로 변환하는 중 오류가 발생했습니다.', err);
}
</pre>
<p>하지만 다음과 같은 오류가 발생합니다. </p>
<인용문>
<p>유형 오류: 루프 구조를 JSON으로 변환하는 중</p>
</인용문>
<p>그런 다음 <code>평탄화</code>를 사용하여 문자열화를 시도해 보세요. </p>
<pre class="brush:js;toolbar:false;">'평면화'에서 평면화 가져오기;
const stringifyStore = flatted.stringify(store);
const parsedStore = flatted.parse(stringifyStore);
</pre>
<p>이렇게 하면 한 단계 더 나아갈 수 있을 것 같았는데 이제 다음과 같은 오류가 발생합니다.</p>
<인용문>
<p>TypeError: 정의되지 않은 속성을 읽을 수 없습니다('iIndexSlice' 읽기)</p>
</인용문>
<p>스토어에서 <code>iIndexStore</code>의 기본값이 0인 것을 보니 이상합니다. 고맙게도 이 시점에서 Amit Patel은 <code>iIndexSlice</code>뿐만 아니라 전체 <code>store.state</code>도 정의되지 않았음을 지적하여 올바른 길을 안내했습니다. </p>
<p>제가 겪었던 것과 유사한 오류가 있는 [Vuex GitHub 문제][4]를 우연히 발견했습니다. </p>
<인용문>
<p>[vuex] getter는 함수여야 하지만 'getters.currentView'는 {}</p>
</인용문>
<p>위에 인용된 질문에서 작성자는 스토어를 내보내지 않고 스토어 구성만 내보내도록 권장합니다. 앱 스토어가 실제 스토어 인스턴스를 내보내고 있다는 것을 깨달았습니다. Vuex 저장소 정의는 다음과 같습니다: </p>
<pre class="brush:js;toolbar:false;">const store = new Vuex.Store({
상태: {
iIndexSlice: 0,
// ...
},
게터: {
현재뷰(상태) {
// 함수 코드 ...
}
돌연변이: {
// 코드
},
작업: {
// 코드
}
});
기본 저장소 내보내기;
</pre>
<p>하지만 지금은 어떻습니까? </p>
<p>HT: 상징적 디버깅에 도움을 준 Mujeeb에게. </p>
<p> 참고: 막다른 골목 등을 건너뛸 수도 있었지만 다른 사람들도 같은 어려움을 겪을 수 있고 일부 버그 등이 언급되면 답변을 Google에 검색하는 것이 더 쉬울 것이라고 생각했습니다. </p>
("Dave가 이 문제를 해결하는 데 너무 많은 시간을 보냈습니다...아주 사소하지만 같은 실수를 저지를 다른 사람을 구할 수 있기를 바랍니다"의 또 다른 에피소드에 오신 것을 환영합니다:
Vuex 스토어를 다음과 같이 리팩토링했습니다.
으아악그런 다음 Jest 테스트를 약간 수정해야 했습니다.
으아악이제 테스트는 문제없이 실행됩니다.