Vue 3의 통합 API 유닛 테스트에서 onMounted() 후크에 $route가 정의되지 않은 것으로 나타났습니다.

Question

내 구성 요소의 setup() 함수에 $route에 액세스하는 onMounted() 후크가 있습니다. ; 속성이지만 테스트에서 $route 객체를 모의하면 onMounted() 정의되지 않음이므로 오류가 발생합니다. 코드는 다음과 같습니다.

Component.vue:

<템플릿>
  <div>{{ this.$route.params.id }}</div>
</템플릿>

<스크립트 lang="ts">
'vue'에서 {defineComponent, onMounted} 가져오기
"vue-router"에서 {useRoute}를 가져옵니다.

기본 정의 내보내기({
  이름: '구성요소',
  설정() {
    const 경로 = useRoute()
    onMounted(() => {
      console.log(route.params.id)
    })

    반품 {}
  }
})

<p><strong>comComponent.spec.ts:</strong></p>
<pre class="brush:php;toolbar:false;">"@vue/test-utils"에서 {mount} 가져오기;
"@/views/Bundle/Component.vue"에서 구성 요소를 가져옵니다.

test('테스트 설명', async () => {
  const mockRoute = {
    매개변수: {
      아이디: 1
    }
  }
  const mockRouter = {
    푸시: jest.fn()
  }

  const 래퍼 = 마운트(구성 요소, {
    글로벌: {
      조롱: {
        $route: mockRoute,
        $router: mockRouter
      }
    }
  })

  Wrapper.find('버튼').trigger('클릭')을 기다립니다.
})

오류 발생: TypeError: 정의되지 않은 'params' 속성을 읽을 수 없습니다

저는 vue-test-utils 버전 2.0.0-rc.12를 사용하고 있습니다.

어떤 도움이라도 주시면 감사하겠습니다

Answer 1

문제는 복합 API를 사용할 때 마운트 옵션(따라서 $route 및 $router의 시뮬레이션도 포함)이 고려되지 않는다는 것입니다.

예를 들어, 경로의 matched속성(구성 요소 내)을 보면 일치하는 경로가 없고 사용 가능한 라우팅 컨텍스트가 없기 때문에 배열이 비어 있게 됩니다. 그러나 그들은 문서를 업데이트했고 거기에서 예제를 볼 수 있습니다.

각 테스트를 시뮬레이션하는 비필수적인 방법이 있는지 궁금합니다...

컴포지션 API를 사용한 모의 라우팅