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
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
+
7
+
To avoid this, we can create a localVue, and install vue-router on that.
8
+
9
+
```js
10
+
importVueRouterfrom'vue-router'
11
+
constlocalVue=createLocalVue()
12
+
13
+
localVue.use(VueRouter)
14
+
15
+
shallow(Component, {
16
+
localVue
17
+
})
18
+
```
19
+
20
+
## Testing components that use router-link or router-view
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.
23
+
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
+
26
+
### Using stubs
27
+
28
+
```js
29
+
shallow(Component, {
30
+
stubs: ['router-link', 'router-view']
31
+
})
32
+
```
33
+
34
+
### Installing vue-router with localVue
35
+
36
+
```js
37
+
importVueRouterfrom'vue-router'
38
+
constlocalVue=createLocalVue()
39
+
40
+
localVue.use(VueRouter)
41
+
42
+
shallow(Component, {
43
+
localVue
44
+
})
45
+
```
46
+
47
+
## Mocking $route and $router
48
+
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.
50
+
51
+
```js
52
+
const$route= {
53
+
path:'/some/path'
54
+
}
55
+
56
+
constwrapper=shallow(Component, {
57
+
mocks: {
58
+
$route
59
+
}
60
+
})
61
+
62
+
wrapper.vm.$router// /some/path
63
+
```
64
+
65
+
## Common gotchas
66
+
67
+
Installing vue-router adds `$route` and `$router` as read-only properties on Vue prototype.
68
+
69
+
This means any future tests that try to mock $route or `$router` will fail.
70
+
71
+
To avoid this, never install vue-router when you're running tests.
Copy file name to clipboardExpand all lines: docs/ja/guides/using-with-vuex.md
+47-44Lines changed: 47 additions & 44 deletions
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,6 @@
1
-
# Vuex と一緒に使用する
1
+
# Using with Vuex
2
+
3
+
In this guide, we'll see how to test Vuex in components with vue-test-utils.
2
4
3
5
## Mocking Actions
4
6
@@ -35,29 +37,29 @@ export default{
35
37
36
38
For the purposes of this test, we don’t care what the actions do, or what the store looks like. We just need to know that these actions are being fired when they should, and that they are fired with the expected value.
37
39
38
-
To test this, we need to pass a mock store to Vue when we mount our component.
40
+
To test this, we need to pass a mock store to Vue when we shallow our component.
41
+
42
+
Instead of passing the store to the base Vue constructor, we can pass it to a - [localVue](../api/options.md#localvue). A localVue is a scoped Vue constructor that we can make changes to without affecting the global Vue constructor.
@@ -93,13 +95,13 @@ What’s happening here? First we tell Vue to use Vuex with the Vue.use method.
93
95
94
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.
95
97
96
-
The actions are [sinon stubs](http://sinonjs.org/). The stubs give us methods to assert whether the actions were called or not.
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.
97
99
98
100
We can then assert in our tests that the action stub was called when expected.
99
101
100
102
Now the way we define the store might look a bit foreign to you.
101
103
102
-
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 sinon stubs 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.
103
105
104
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**.
105
107
@@ -133,14 +135,13 @@ This is a fairly simple component. It renders the result of the getters clicks a
This test is similar to our actions test. We create a mock store before each test, pass it as an option when we call mount, 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.
174
175
175
176
This is great, but what if we want to check our getters are returning the correct part of our state?
176
177
@@ -209,16 +210,14 @@ Simple component that includes one action and one getter.
0 commit comments