-
Notifications
You must be signed in to change notification settings - Fork 723
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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('/') | ||
}) | ||
``` | ||
|
||
2. **Reset the window location `afterEach`**. If you don't want to pass an | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This isn't the best option for people - they should instead use |
||
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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
|
||
|
There was a problem hiding this comment.
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)