Skip to content

Commit ea1d682

Browse files
robcresswelleddyerburgh
authored andcommitted
docs: Improve the "using-with-vue-router" docs (#292)
1 parent 8afcd81 commit ea1d682

File tree

1 file changed

+11
-5
lines changed

1 file changed

+11
-5
lines changed

docs/en/guides/using-with-vue-router.md

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ You should never install Vue Router on the Vue base constructor in tests. Instal
77
To avoid this, we can create a localVue, and install Vue Router on that.
88

99
```js
10+
import { shallow, createLocalVue } from 'vue-test-utils'
1011
import VueRouter from 'vue-router'
11-
const localVue = createLocalVue()
1212

13+
const localVue = createLocalVue()
1314
localVue.use(VueRouter)
1415

1516
shallow(Component, {
@@ -21,11 +22,13 @@ shallow(Component, {
2122

2223
When you install Vue Router, the `router-link` and `router-view` components are registered. This means we can use them anywhere in our application without needing to import them.
2324

24-
When we run tests, we need to make these vue-router components available to the component we're mounting. There are two methods to do this.
25+
When we run tests, we need to make these Vue Router components available to the component we're mounting. There are two methods to do this.
2526

2627
### Using stubs
2728

2829
```js
30+
import { shallow } from 'vue-test-utils'
31+
2932
shallow(Component, {
3033
stubs: ['router-link', 'router-view']
3134
})
@@ -34,9 +37,10 @@ shallow(Component, {
3437
### Installing Vue Router with localVue
3538

3639
```js
40+
import { shallow, createLocalVue } from 'vue-test-utils'
3741
import VueRouter from 'vue-router'
38-
const localVue = createLocalVue()
3942

43+
const localVue = createLocalVue()
4044
localVue.use(VueRouter)
4145

4246
shallow(Component, {
@@ -49,6 +53,8 @@ shallow(Component, {
4953
Sometimes you want to test that a component does something with parameters from the `$route` and `$router` objects. To do that, you can pass custom mocks to the Vue instance.
5054

5155
```js
56+
import { shallow } from 'vue-test-utils'
57+
5258
const $route = {
5359
path: '/some/path'
5460
}
@@ -59,7 +65,7 @@ const wrapper = shallow(Component, {
5965
}
6066
})
6167

62-
wrapper.vm.$router // /some/path
68+
wrapper.vm.$route.path // /some/path
6369
```
6470

6571
## Common gotchas
@@ -68,4 +74,4 @@ Installing Vue Router adds `$route` and `$router` as read-only properties on Vue
6874

6975
This means any future tests that try to mock `$route` or `$router` will fail.
7076

71-
To avoid this, never install Vue Router when you're running tests.
77+
To avoid this, never install Vue Router globally when you're running tests; use a localVue as detailed above.

0 commit comments

Comments
 (0)