search

testing-library / vue-testing-library

🦎 Simple and complete Vue.js testing utilities that encourage good testing practices.
http://testing-library.com/vue
MIT License
1.07k stars 111 forks source link

fix: use Vue Router in abstract mode #238

Closed blimmer closed 3 years ago

blimmer commented 3 years ago

This PR uses mode: 'abstract' when creating a Vue Router instance.

By default, the Vue Router uses 'hash' mode (docs) which, in test environments with JSDOM, updates the window.location.href hash value. In jest, the JSDOM environment is not reset between tests, which means that state appears to leak between tests, as mentioned in #210.

I did some digging through the vue-test-utils issue tracker and found https://github.com/vuejs/vue-test-utils/issues/1681, which talks about this issue in more depth. The recommended solution from that thread is to use abstract mode, which guarantees you start with a clean Vue Router each time it's instantiated.

Alternately, if this solution does not seem acceptable, users can utilize a lifecycle hook, such as Jest's beforeEach to reset the state between tests. For example:

beforeEach(() => {
  window.location.replace('http://localhost/');
});

Fixes #210

blimmer commented 3 years ago

Closing in favor of #239