테스트 실행 중 vue-module이 재설정되지 않음
현재 Vue.js 앱에 대한 테스트를 쓰고 있는데, 라우팅 테스트가 있는 경우 경로 지정이라는 문제에 휘말렸습니다.href
이전 테스트에 따라 각 다음 테스트에서 수정됩니다.
예를 들어, 첫 번째 테스트에서 시뮬레이트할 경우,href='document/123'
체크해 주세요.vm.$router.history.path
, 올바르게 표시됩니다.document/123
하지만 다음 테스트에서도 똑같이 하려고 하면vm.$router.history.path
나타나다document/document/123
다음 테스트 때마다 경로에서 계속 'displicate'를 추가합니다.
그것은 이상하고 처럼 보인다.router
에서의 모든 테스트 동안 기존 상태를 유지합니다.describe
내가 가지고 있음에도 불구하고beforeEach
Vue 및 Vue-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
'programing' 카테고리의 다른 글
vue 컴포넌트가 있는 브라우저의 뒤로 버튼을 비활성화하려면 어떻게 해야 합니까? (0) | 2022.08.11 |
---|---|
스토어 데이터가 필요한 API를 깔끔하게 호출하는 방법 (0) | 2022.08.11 |
Vuetify 내비게이션 드로어가 한 번 작동한 후 멈춥니다. (0) | 2022.08.11 |
Vuejs는 변경 이벤트 시 오래된 값을 가져옵니다. (0) | 2022.08.11 |
라우터 전 Vue created()에 로드되기 전에 실행된 각 가드 (0) | 2022.08.11 |