Skip to content

docs(vue): update faq for Vue Router abstract mode #881

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 44 additions & 22 deletions docs/vue-testing-library/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -90,40 +90,62 @@ 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:
To work around this issue, pass an instantiated router using `abstract` mode.
`abstract` mode does not store route information on the JSDOM `window`, so
routing information will not leak between tests. For example:

```js
import { render, fireEvent } from '@testing-library/vue'
import { render } 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
],
}),
test('uses abstract mode for the router', async () => {
const router = new VueRouter({
mode: 'abstract',
routes: [
// Your routes here
],
})

const renderResult = render(Component, {
routes: router,
})

// Unlike the router in `hash` mode, the initial routing stack is empty. So,
// you need to push an initial route to the stack.
await router.push('/')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @maxarndt - this adds the initial push you mentioned in testing-library/vue-testing-library#210 (comment)

})
```

2. **Reset the window location `afterEach`**. If you don't want to pass an
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't the best option for people - they should instead use abstract mode, so don't recommend it.

instantiated Router, you can instead reset the `window.location` after each
test, like this:
To reduce boilerplate, you can create a custom render function to use throughout
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@maxarndt - if you've got some time for a contribution, it would be great to pull over the Custom Render setup guide from the react-testing-library docs (https://testing-library.com/docs/react-testing-library/setup#custom-render) to the currently blank setup page of Vue Testing Library (https://testing-library.com/docs/vue-testing-library/setup). Then, we could link to the custom render docs from this FAQ.

your test suite. For example:

```js
afterEach(() => {
window.location.replace('http://localhost')
})
```
// test-utils.js

This will clear any route transitions stored in the `window` location property.
import { render } from '@testing-library/vue'
import VueRouter from 'vue-router'

export async function renderApp(component, options) {
const router = new VueRouter({
mode: 'abstract',
routes: [
// Your routes here
],
})

const renderResult = render(component, {
routes: router,
...options,
})

// Unlike the router in `hash` mode, the initial routing stack is empty. So,
// you need to push an initial route to the stack.
await router.push('/')

return renderResult
}
```

</details>

Expand Down