Skip to content

Commit 91a46ed

Browse files
38elementseddyerburgh
authored andcommitted
Update unit-testing-vue-components.md (vuejs#1623)
1 parent b537945 commit 91a46ed

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/v2/cookbook/unit-testing-vue-components.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ export default {
4444
```
4545

4646
```js
47-
import { shallow } from '@vue/test-utils'
47+
import { shallowMount } from '@vue/test-utils'
4848

4949
test('Foo', () => {
5050
// render the component
51-
const wrapper = shallow(Hello)
51+
const wrapper = shallowMount(Hello)
5252

5353
// should not allow for `username` less than 7 characters, excludes whitespace
5454
wrapper.setData({ username: ' '.repeat(7) })
@@ -145,11 +145,11 @@ The things that we should test are:
145145
And our first attempt at test:
146146

147147
```js
148-
import { shallow } from '@vue/test-utils'
148+
import { shallowMount } from '@vue/test-utils'
149149

150150
describe('Foo', () => {
151151
it('renders a message and responds correctly to user input', () => {
152-
const wrapper = shallow(Foo, {
152+
const wrapper = shallowMount(Foo, {
153153
data: {
154154
message: 'Hello World',
155155
username: ''
@@ -183,11 +183,11 @@ The below example improves the test by:
183183

184184
*Updated test*:
185185
```js
186-
import { shallow } from '@vue/test-utils'
186+
import { shallowMount } from '@vue/test-utils'
187187
import Foo from './Foo'
188188

189189
const factory = (values = {}) => {
190-
return shallow(Foo, {
190+
return shallowMount(Foo, {
191191
data: { ...values }
192192
})
193193
}
@@ -221,7 +221,7 @@ describe('Foo', () => {
221221

222222
Points to note:
223223

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.
225225

226226
## Additional Context
227227

0 commit comments

Comments
 (0)