You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/en/guides/using-with-vue-router.md
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
-
# Using with vue-router
1
+
# Using with Vue Router
2
2
3
-
## Installing vue-router in tests
3
+
## Installing Vue Router in tests
4
4
5
-
You should never install vue-router on the Vue base constructor in tests. Installing vue-router adds `$route` and `$router` as read-only properties on Vue prototype.
5
+
You should never install Vue Router on the Vue base constructor in tests. Installing Vue Router adds `$route` and `$router` as read-only properties on Vue prototype.
6
6
7
-
To avoid this, we can create a localVue, and install vue-router on that.
7
+
To avoid this, we can create a localVue, and install Vue Router on that.
8
8
9
9
```js
10
10
importVueRouterfrom'vue-router'
@@ -17,9 +17,9 @@ shallow(Component, {
17
17
})
18
18
```
19
19
20
-
## Testing components that use router-link or router-view
20
+
## Testing components that use `router-link` or `router-view`
21
21
22
-
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.
22
+
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.
23
23
24
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
25
@@ -31,7 +31,7 @@ shallow(Component, {
31
31
})
32
32
```
33
33
34
-
### Installing vue-router with localVue
34
+
### Installing Vue Router with localVue
35
35
36
36
```js
37
37
importVueRouterfrom'vue-router'
@@ -44,7 +44,7 @@ shallow(Component, {
44
44
})
45
45
```
46
46
47
-
## Mocking $route and $router
47
+
## Mocking `$route` and `$router`
48
48
49
49
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.
What’s happening here? First we tell Vue to use Vuex with the Vue.use method. This is just a wrapper around Vue.use.
94
+
What’s happening here? First we tell Vue to use Vuex with the `Vue.use` method. This is just a wrapper around `Vue.use`.
95
95
96
-
We then make a mock store by calling new Vuex.store with our mock values. We only pass it the actions, since that’s all we care about.
96
+
We then make a mock store by calling new `Vuex.store` with our mock values. We only pass it the actions, since that’s all we care about.
97
97
98
98
The actions are [jest mock functions](https://facebook.github.io/jest/docs/en/mock-functions.html). These mock functions give us methods to assert whether the actions were called or not.
99
99
100
100
We can then assert in our tests that the action stub was called when expected.
101
101
102
102
Now the way we define the store might look a bit foreign to you.
103
103
104
-
We’re using beforeEach to ensure we have a clean store before each test. beforeEach is a mocha hook that’s called before each test. In our test, we are reassigning the store variables value. If we didn’t do this, the mock functions would need to be automatically reset. It also lets us change the state in our tests, without it affecting later tests.
104
+
We’re using `beforeEach` to ensure we have a clean store before each test. `beforeEach` is a mocha hook that’s called before each test. In our test, we are reassigning the store variables value. If we didn’t do this, the mock functions would need to be automatically reset. It also lets us change the state in our tests, without it affecting later tests.
105
105
106
106
The most important thing to note in this test is that **we create a mock Vuex store and then pass it to vue-test-utils**.
107
107
@@ -130,7 +130,7 @@ export default{
130
130
</script>
131
131
```
132
132
133
-
This is a fairly simple component. It renders the result of the getters clicks and inputValue. Again, we don’t really care about what those getters returns – just that the result of them is being rendered correctly.
133
+
This is a fairly simple component. It renders the result of the getters `clicks` and `inputValue`. Again, we don’t really care about what those getters returns – just that the result of them is being rendered correctly.
This test is similar to our actions test. We create a mock store before each test, pass it as an option when we call shallow, and assert that the value returned by our mock getters is being rendered.
174
+
This test is similar to our actions test. We create a mock store before each test, pass it as an option when we call `shallow`, and assert that the value returned by our mock getters is being rendered.
175
175
176
176
This is great, but what if we want to check our getters are returning the correct part of our state?
0 commit comments