Skip to content

Commit 7579b23

Browse files
committed
docs(vue): update faq for Vue Router abstract mode
1 parent 0efe176 commit 7579b23

File tree

1 file changed

+44
-22
lines changed

1 file changed

+44
-22
lines changed

docs/vue-testing-library/faq.mdx

+44-22
Original file line numberDiff line numberDiff line change
@@ -90,40 +90,62 @@ environment in between test invocations, so route transitions from previous
9090
tests can leak into subsequent tests, even though a new Vue Router is created
9191
with each call to `render`.
9292

93-
You can work around this in one of two ways:
94-
95-
1. **Pass an instantiated router using `abstract` mode**. `abstract` mode does
96-
not store route information on `window`, so transitions will not leak between
97-
tests. For example:
93+
To work around this issue, pass an instantiated router using `abstract` mode.
94+
`abstract` mode does not store route information on the JSDOM `window`, so
95+
routing information will not leak between tests. For example:
9896

9997
```js
100-
import { render, fireEvent } from '@testing-library/vue'
98+
import { render } from '@testing-library/vue'
10199
import Component from './Component.vue'
102100
import VueRouter from 'vue-router'
103101

104-
test('uses abstract mode for the router', () => {
105-
render(Component, {
106-
routes: new VueRouter({
107-
mode: 'abstract',
108-
routes: [
109-
// Your routes here
110-
],
111-
}),
102+
test('uses abstract mode for the router', async () => {
103+
const router = new VueRouter({
104+
mode: 'abstract',
105+
routes: [
106+
// Your routes here
107+
],
108+
})
109+
110+
const renderResult = render(Component, {
111+
routes: router,
112112
})
113+
114+
// Unlike the router in `hash` mode, the initial routing stack is empty. So,
115+
// you need to push an initial route to the stack.
116+
await router.push('/')
113117
})
114118
```
115119

116-
2. **Reset the window location `afterEach`**. If you don't want to pass an
117-
instantiated Router, you can instead reset the `window.location` after each
118-
test, like this:
120+
To reduce boilerplate, you can create a custom render function to use throughout
121+
your test suite. For example:
119122

120123
```js
121-
afterEach(() => {
122-
window.location.replace('http://localhost')
123-
})
124-
```
124+
// test-utils.js
125125

126-
This will clear any route transitions stored in the `window` location property.
126+
import { render } from '@testing-library/vue'
127+
import VueRouter from 'vue-router'
128+
129+
export async function renderApp(component, options) {
130+
const router = new VueRouter({
131+
mode: 'abstract',
132+
routes: [
133+
// Your routes here
134+
],
135+
})
136+
137+
const renderResult = render(component, {
138+
routes: router,
139+
...options,
140+
})
141+
142+
// Unlike the router in `hash` mode, the initial routing stack is empty. So,
143+
// you need to push an initial route to the stack.
144+
await router.push('/')
145+
146+
return renderResult
147+
}
148+
```
127149

128150
</details>
129151

0 commit comments

Comments
 (0)