diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx index 1aa4dcd70..0b7daef43 100644 --- a/docs/vue-testing-library/api.mdx +++ b/docs/vue-testing-library/api.mdx @@ -71,10 +71,11 @@ The object definition of a [Vuex](https://vuex.vuejs.org/) store. If a `store` object is provided, `Vue Testing Library` will import and configure a Vuex store. -##### `routes` (`Array`) +##### `routes` (`Array` | `VueRouter`) A set of routes for [Vue Router](https://router.vuejs.org/). If `routes` is -provided, the library will import and configure Vue Router. +provided, the library will import and configure Vue Router. If an instantiated +Vue Router is passed, it will be used. ##### `props` (`Object`) diff --git a/docs/vue-testing-library/faq.mdx b/docs/vue-testing-library/faq.mdx index c33b5ef4c..b1788340c 100644 --- a/docs/vue-testing-library/faq.mdx +++ b/docs/vue-testing-library/faq.mdx @@ -80,6 +80,53 @@ expect(queryByText('submit')).not.toBeInTheDocument() +
+ Why does my Vue Router state seem to be shared between tests? + +By default, Vue Router uses +[`hash` routing mode](https://router.vuejs.org/api/#mode), which stores route +updates in `window.location`. Test runners, such as Jest, do not reset the JSDOM +environment in between test invocations, so route transitions from previous +tests can leak into subsequent tests, even though a new Vue Router is created +with each call to `render`. + +You can work around this in one of two ways: + +1. **Pass an instantiated router using `abstract` mode**. `abstract` mode does + not store route information on `window`, so transitions will not leak between + tests. For example: + +```js +import { render, fireEvent } from '@testing-library/vue' +import Component from './Component.vue' +import VueRouter from 'vue-router' + +test('uses abstract mode for the router', () => { + render(Component, { + routes: new VueRouter({ + mode: 'abstract', + routes: [ + // Your routes here + ], + }), + }) +}) +``` + +2. **Reset the window location `afterEach`**. If you don't want to pass an + instantiated Router, you can instead reset the `window.location` after each + test, like this: + +```js +afterEach(() => { + window.location.replace('http://localhost') +}) +``` + +This will clear any route transitions stored in the `window` location property. + +
+