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: src/v2/cookbook/unit-testing-vue-components.md
+7-7
Original file line number
Diff line number
Diff line change
@@ -44,11 +44,11 @@ export default {
44
44
```
45
45
46
46
```js
47
-
import { shallow } from'@vue/test-utils'
47
+
import { shallowMount } from'@vue/test-utils'
48
48
49
49
test('Foo', () => {
50
50
// render the component
51
-
constwrapper=shallow(Hello)
51
+
constwrapper=shallowMount(Hello)
52
52
53
53
// should not allow for `username` less than 7 characters, excludes whitespace
54
54
wrapper.setData({ username:''.repeat(7) })
@@ -145,11 +145,11 @@ The things that we should test are:
145
145
And our first attempt at test:
146
146
147
147
```js
148
-
import { shallow } from'@vue/test-utils'
148
+
import { shallowMount } from'@vue/test-utils'
149
149
150
150
describe('Foo', () => {
151
151
it('renders a message and responds correctly to user input', () => {
152
-
constwrapper=shallow(Foo, {
152
+
constwrapper=shallowMount(Foo, {
153
153
data: {
154
154
message:'Hello World',
155
155
username:''
@@ -183,11 +183,11 @@ The below example improves the test by:
183
183
184
184
*Updated test*:
185
185
```js
186
-
import { shallow } from'@vue/test-utils'
186
+
import { shallowMount } from'@vue/test-utils'
187
187
importFoofrom'./Foo'
188
188
189
189
constfactory= (values= {}) => {
190
-
returnshallow(Foo, {
190
+
returnshallowMount(Foo, {
191
191
data: { ...values }
192
192
})
193
193
}
@@ -221,7 +221,7 @@ describe('Foo', () => {
221
221
222
222
Points to note:
223
223
224
-
At the top, we declare the factory function which merges the `values` object into `data` and returns a new `wrapper` instance. This way, we don't need to duplicate `const wrapper = shallow(Foo)` in every test. Another great benefit to this is when more complex components with a method or computed property you might want to mock or stub in every test, you only need to declare it once.
224
+
At the top, we declare the factory function which merges the `values` object into `data` and returns a new `wrapper` instance. This way, we don't need to duplicate `const wrapper = shallowMount(Foo)` in every test. Another great benefit to this is when more complex components with a method or computed property you might want to mock or stub in every test, you only need to declare it once.
0 commit comments