JEST vue warn setup binding property "" is already declared as a prop

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.use(VueCompositionAPI)

describe('LoginButton', () => {
  let wrapper: any
  localVue.use(VueCompositionAPI)

  beforeEach(() => {
    wrapper = shallowMount(LoginButton, { localVue })
  })

  test('Login Button 스냅샷 테스트', () => {
    expect(wrapper.html()).toMatchSnapshot()
  })
})

 

만약 이러한 설정을 진행 하였는데도 불구하고 오류가 지속적으로 출력될 경우

nuxt.js는 고유의 템플릿 태그(nuxt-link, client-only 등등)를 사용하는데 이때 이 템플릿 태그를 JEST에서 해석할 수 없을 경우 동일한 오류가 출력되는 경우가 종종 있습니다.

 

고유 템플릿태그를 JEST에게 인식하기 위해서는 아래 게시글을 참고해주세요!

https://gmyankee.tistory.com/337

JEST Unknown custom element: - did you register the component correctly? For recursive components, make sure to pr