currently I am writing tests for Vue.js app and got stuck with the problem: if there are some tests for routing, paths in href are modified in each next test according to previous ones.
For example, if in first test I simulate click on a link with href='document/123' and check the vm.$router.history.path, it will correctly show document/123, but if in the next test I'll try to do the same, vm.$router.history.path will show document/document/123 and keep adding 'document' in path with every next test.
It is strange and looks like router keeps existing during all tests in describe block even though I have beforeEach hook where I re-initialize Vue and usage of all plugins alongside with Vue-router and in afterEach hook I call $destroy() method on Vue instance.
Is there any way to modify or reset vm.$router.history object or its properties in afterEach hook or am I missing something else?
Here is code of the test:
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();
});
});
});