Vue: utils vue 구성 테스트 - 루트.$route

Vue: utils vue 구성 테스트 - 루트.$route

버전

---

테스트 효용

1.0.3

뷰

2.6.11

Vue 라우터

3.20

Vue 컴포지션 API

1.0.0~128.8

---

때문에 컴포넌트 테스트를 개발하는 데 어려움이 있습니다.root.$route.

컴포넌트에는 컴포넌트의 변수를 변경하기 위해 루트가 변경되었을 때 이를 인식하는 워치가 있습니다.

내 컴포넌트

<script>
export default {
    setup ( _, { root }) {
       // behavior
       ...
        watch( () => root.$route,
            ({ query, meta }) => {
               foo = 'bar';
            }, {
                immediate: true
            });
    }
};
</script>

나의 시험

import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueCompositionAPI from '@vue/composition-api';
import Component from '@/components/bundles/layout/Component';
import router from '@/router/';

const localVue = createLocalVue();
localVue.use( VueCompositionAPI );
localVue.use( router );

describe( 'Component', () => {
    it( 'Insert', () => {
        const wrapper = shallowMount( Component, {
            mocks: {
                $t: () => ({})
            },
            localVue,
            router
        });

        console.log( wrapper.html() );
    });
});

에러

TypeError: '정의되지 않음'의 속성 'query'는 정의되지 않았으므로 파기할 수 없습니다.

라우터를 조롱하려고 했지만 효과가 없었어요.

다음과 같은 방법으로 시도했습니다.

1:

...

describe( 'Component', () => {
    it( 'Insert', () => {
        const wrapper = shallowMount( Component, {
            mocks: {
                $t: () => ({}),
                $route: { query: '', meta: '' }
            },
            localVue,
            router
        });

        console.log( wrapper.html() );
    });
});

2:

import router from '@/router/';

jest.mock( '@/router/', () => ({
    currentRoute: {
        meta: {},
        query: {}
    },
    push: jest.fn( () => Promise.resolve() )
}) );

도와줄까?

언급URL : https://stackoverflow.com/questions/65700647/vue-test-utils-vue-composition-root-route