programing

테스트 실행 중 vue-module이 재설정되지 않음

copysource 2022. 8. 11. 23:39
반응형

테스트 실행 중 vue-module이 재설정되지 않음

현재 Vue.js 앱에 대한 테스트를 쓰고 있는데, 라우팅 테스트가 있는 경우 경로 지정이라는 문제에 휘말렸습니다.href이전 테스트에 따라 각 다음 테스트에서 수정됩니다.

예를 들어, 첫 번째 테스트에서 시뮬레이트할 경우,href='document/123'체크해 주세요.vm.$router.history.path, 올바르게 표시됩니다.document/123하지만 다음 테스트에서도 똑같이 하려고 하면vm.$router.history.path나타나다document/document/123다음 테스트 때마다 경로에서 계속 'displicate'를 추가합니다.

그것은 이상하고 처럼 보인다.router에서의 모든 테스트 동안 기존 상태를 유지합니다.describe내가 가지고 있음에도 불구하고beforeEachVueVue-router와 함께 모든 플러그인의 사용을 다시 초기화하는 후크afterEach후크 콜$destroy()Vue 인스턴스의 메서드.

수정 또는 리셋할 방법이 있습니까?vm.$router.history오브젝트 또는 그 속성afterEach후크 아니면 다른 걸 놓쳤나요?

테스트 코드는 다음과 같습니다.

import Vue from 'vue'
import Search from '../../../src/Search.vue';
import router from '../../../src/router';

describe('Search', () => {
   let vm;

   beforeEach((done) => {
     const container = document.createElement('div');
     vm = new Vue({
        router,
        render: h => h(Search),
     }).$mount(container);
     done();
   });

   afterEach((done) => {
     vm.$destroy();
     done();
   });

   it('should navigate to single page when user clicks on "More" button', (done) => {
     let moreButton = vm.$el.querySelector('.btn');
     let clickEvent = new window.Event('click');
     moreButton.dispatchEvent(clickEvent);
     Vue.nextTick().then(() => {
       expect(vm.$router.history.current.path).to.equal('/document/1548'); // passes
       done();
     });
   });

  it('should navigate to single page when user clicks on document title', (done) => {
     let link = vm.$el.querySelector('h6 a');
     let clickEvent = new window.Event('click');
     link.dispatchEvent(clickEvent);
     Vue.nextTick().then(() => {
       expect(vm.$router.history.current.path).to.equal('/document/1548'); // fails, actual path is /document/document/1548
       done();
     });
   });
});

오래된 질문이지만, 다른 질문에서도 같은 문제가 발생할 경우를 대비해서 다음 URL에서 솔루션을 설명합니다.https://github.com/vuejs/vue-test-utils/issues/1681

특히 테스트 스위트의 'mode' 파라미터를 '추상'으로 변경합니다.그렇지 않으면 루트는 테스트 사이에 유지되는 window.location을 기반으로 합니다.vue-instance의 새 인스턴스로 인스턴스화된 스택을 기반으로 탐색을 구성합니다.

로컬에서는 vue-router의 인스턴스화를 매개 변수화하여 프로덕션 모드에서 'history'를 사용하고 테스트 스위트 'abstract'를 실행해야 했습니다.

언급URL : https://stackoverflow.com/questions/45454702/vue-router-doesnt-reset-during-running-tests

반응형