JEST에서 vue 또는 nuxt를 사용하는 도중 setup binding property "" is already declared as a prop Test Case 자체는 성공으로 Passed가 나타나지만 console에서는 오류가 나는 것을 확인할 수 있습니다. 위 오류는 Composition API를 사용한 JEST Test 결과에서 주로 등장을 하게 되는데, 가장 기본적인 해결 방법은 테스트 케이스 내에서 로컬 뷰에 VueCompositionAPI를 사용한다고 선언을 해주어야 합니다. import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' const localVue = createLocalVue() localVue.u..

Nuxt.js에서 JEST를 사용하다 보면 마주치는 오류중 하나로 template tag를 JEST에서 해석할 수 없어서 나타나는 증상 중 하나입니다. 대표적으로 nuxt-link 등의 nuxt만의 고유한 태그들에서 이러한 현상이 발생할 수 있습니다. Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. 이것을 해결하기 위해서는 JEST setup에서 mocking된 component.vue를 하나 생성해주어야 합니다. // test/__mocks__/clientOnlyMock.vue setup.js를 통해 생성한 컴포넌..

https://gmyankee.tistory.com/334 Nuxt.js + Typescript + Vuetify.js + Jest 설정하기 Nuxt.js와 vuetify.js 그리고 Typescript를 이용한 jest 설정은 생각보다 손이 많이 갑니다. 하지만 초기 설정만 하면되는데, 매번 까먹어서 검색하기가 귀찮으니 다들 이 게시글을 즐겨찾기 하시거나, Wh gmyankee.tistory.com 지난번에 위 링크처럼 Nuxt.js + Typescript + Vuetify.js + JEST.js 의 조합으로 Unit Test 환경을 구축하였지만, Vuex를 적용하는 내용이 빠져서 추가로 작성을 해보고자 합니다. Vuex는 Typescript를 조합하면 대체로 많은 외국 게시글들은 Typescript ..

Nuxt.js와 vuetify.js 그리고 Typescript를 이용한 jest 설정은 생각보다 손이 많이 갑니다. 하지만 초기 설정만 하면되는데, 매번 까먹어서 검색하기가 귀찮으니 다들 이 게시글을 즐겨찾기 하시거나, Whale 브라우저를 사용중이시라면 스크랩북에 추가하시죠! 진행해야할 사항은 간단하게 정리해보자면 JEST 설치 Typescript 설정 Vuetify 선언 설정 Test 생각보다 별로없군요 JEST 설치 Nuxt.js를 설치할때 npx create-nuxt-app 을 이용하여 설치하면 JEST를 쉽게 설치할 수 있습니다. // npx create-nuxt-app npx create-nuxt-app test 이때 jest를 포함하게되면 jest와 관련된 package들이 추가되고, scr..