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-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -79,11 +79,11 @@ Component unit tests have lots of benefits:
79
79
- Improve design
80
80
- Facilitate refactoring
81
81
82
-
Automated testing allows large teams of developers to maintain complex codebases.
82
+
Automated testing allows large teams of developers to maintain complex codebases.
83
83
84
84
#### Getting started
85
85
86
-
[vue-test-utils](https://github.com/vuejs/vue-test-utils) is the official library for unit testing Vue components. The (vue-cli)[https://github.com/vuejs/vue-cli] webpack template comes with either Karma or Jest, both well supported test runners, and there are some (guides)[https://vue-test-utils.vuejs.org/en/guides/] in the `vue-test-utils` documentation.
86
+
[vue-test-utils](https://github.com/vuejs/vue-test-utils) is the official library for unit testing Vue components. The [vue-cli](https://github.com/vuejs/vue-cli) webpack template comes with either Karma or Jest, both well supported test runners, and there are some [guides](https://vue-test-utils.vuejs.org/en/guides/) in the `vue-test-utils` documentation.
87
87
88
88
## Real-World Example
89
89
@@ -92,11 +92,11 @@ Unit tests should be
92
92
- Easy to understand
93
93
- Only test a _single unit of work_
94
94
95
-
Let's continue building on the previous example, while introducing the idea of a [factory function](https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)) to make our test more compact and readable. The component should:
95
+
Let's continue building on the previous example, while introducing the idea of a <ahref="https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)">factory function</a> to make our test more compact and readable. The component should:
96
96
97
97
- show a 'Welcome to the Vue.js cookbook' greeting.
98
98
- prompt the user to enter their username
99
-
- if the entered username is less than seven letters, display an error
99
+
-display an error if the entered username is less than seven letters
100
100
101
101
Let's take a look at the component code first:
102
102
@@ -218,7 +218,7 @@ describe('Foo', () => {
218
218
219
219
Points to note:
220
220
221
-
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.
221
+
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.
222
222
223
223
## Additional Context
224
224
@@ -230,13 +230,13 @@ The above test is fairly simple, but in practice Vue components often have other
230
230
231
231
There are more complete examples showing such tests in the `vue-test-utils`[guides](https://vue-test-utils.vuejs.org/en/guides/).
232
232
233
-
`vue-test-utils` and the enormous JavaScript ecosystem provides plenty of tooling to facilitate almost 100% test coverage. Unit tests are only one part of the testing pyramid, though. Some other types of tests include e2e (end to end) tests, and snapshot tests. Unit tests are the smallest and most simple of tests - they make assertions on the smallest units of work, isolating each part of a single component.
233
+
`vue-test-utils` and the enormous JavaScript ecosystem provides plenty of tooling to facilitate almost 100% test coverage. Unit tests are only one part of the testing pyramid, though. Some other types of tests include e2e (end to end) tests, and snapshot tests. Unit tests are the smallest and most simple of tests - they make assertions on the smallest units of work, isolating each part of a single component.
234
234
235
235
Snapshot tests save the markup of your Vue component, and compare to the new one generated each time the test runs. If something changes, the developer is notified, and can decide if the change was intentional (the component was updated) or accidentally (the component is behaving incorrectly).
236
236
237
237
End to end tests involve ensure a number of components interact together well. They are more high level. Some examples might be testing if a user can sign up, log in, and update their username. These are slowly to run than unit tests or snapshot tests.
238
238
239
-
Unit tests are most useful during development, either to help a developer think about how to design a component, or refactor an existing component, and are often run every time code is changed.
239
+
Unit tests are most useful during development, either to help a developer think about how to design a component, or refactor an existing component, and are often run every time code is changed.
240
240
241
241
Higher level tests, such as end to end tests, run much slower. These usually run pre-deploy, to ensure each part of the system is working together correctly.
0 commit comments