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

작동 중인 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에 검색하는 것이 더 쉬울 것이라고 생각했습니다.

P粉604848588
P粉604848588

모든 응답 (1)
P粉421119778

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

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

으아악

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

으아악

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

    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!