51 | ```
52 |
53 | `Parent`와 `Child`의 마크업이 완전히 렌더 되었습니다. 반면에 `shallowWrapper.html()`은 아래와 같이 나옵니다.
54 |
55 | ```html
56 |
57 | ```
58 |
59 | ``가 위치한 곳이 `vuecomponent-stub />`으로 대체됐습니다. `shallowMount`는 정규 html 엘리먼트를 렌더하지만, Vue 컴포넌트를 스텁(stub)으로 대체합니다.
60 |
61 | > 스텁은 진짜를 위해서 세워 놓은 '가짜' 객체의 일종입니다.
62 |
63 | 스텁은 매우 유용한 방법입니다. 아래와 같은 `App.vue` 컴포넌트를 테스트하기를 원한다고 상상해보세요.
64 |
65 | ```vue
66 |
67 |
68 |
My Vue App
69 |
70 |
71 |
72 | ```
73 |
74 | 정확하게 렌더된 `
My Vue App
`을 테스트하려고 합니다. `mounted` 라이프사이클 훅에서 외부 API에 요청을 보내는 `` 컴포넌트도 가지고 있습니다.
75 |
76 | `mount`를 사용하면, 일부 텍스트의 렌더 여부만 확인하고 싶을 뿐이어도, ``는 API를 요청합니다. 이 요청은 테스트를 느리게 만들거나 실패하기 쉽게 만듭니다. 그래서 외부 의존성을 없앱니다. `shallowMount`를 사용해서 ``는 ``으로 대체되고, API 호출은 시작되지 않습니다.
77 |
--------------------------------------------------------------------------------
/src/ko/testing-vuex.md:
--------------------------------------------------------------------------------
1 | ## Vuex 테스트하기
2 |
3 | 다음 몇 개의 가이드에서는 Vuex를 테스트하는 방법에 대해 다룹니다.
4 |
5 | ## Vuex 테스트의 두 가지 측면
6 |
7 | 일반적으로 컴포넌트는 아래의 경우에 Vuex와 상호작용 합니다.
8 |
9 | 1. 뮤테이션으로 커밋하기
10 | 2. 액션을 디스패치하기
11 | 3. `$store.state`나 getter를 통해 상태에 접근하기
12 |
13 | 이런 테스트는 컴포넌트가 Vuex 스토어(store)의 현재 상태를 바탕으로 정확하게 동작하는지 어설트(assert)합니다. 뮤테이터(mutators)나 액션(actions) 또는 게터(getters)의 구현체에 대해 알 필요는 없습니다.
14 |
15 | 뮤테이션(mutations)이나 게터처럼 스토어에 의해 수행되는 임의의 로직은 독립적으로 테스트할 수 있습니다. Vuex 스토어가 일반 자바스크립트 함수로 이루어져있어서 쉽게 유닛을 테스트할 수 있기 때문입니다.
16 |
17 | 다음 가이드는 Vuex 스토어를 사용하는 컴포넌트를 테스트하는 몇 가지 테크닉을 소개합니다. 그리고 스토어의 상태를 바탕으로 올바르게 동작하는지 확인합니다. 이후의 가이드에서는 독립적으로 Vuex를 테스트하는 방법에 대해 다루겠습니다.
18 |
--------------------------------------------------------------------------------
/src/ko/vuex-mutations.md:
--------------------------------------------------------------------------------
1 | ## 뮤테이션 테스트하기
2 |
3 | 독립적으로 뮤테이션(mutations)를 테스트하는 일은 매우 간단합니다. 뮤테이션이 단지 일반 자바스크립트 함수이기 때문입니다. 이 페이지는 독립적으로 뮤테이션을 테스트하는 일에 대해 다룹니다. 뮤테이션을 커밋하는(committing) 컴포넌트의 문맥(context)에서 뮤테이션을 테스트하길 원한다면 [여기](https://lmiller1990.github.io/vue-testing-handbook/vuex-in-components-mutations-and-actions.html)를 보세요.
4 |
5 | 다음 예제에서 사용한 코드는 [여기](https://github.com/lmiller1990/vue-testing-handbook/blob/master/demo-app/tests/unit/mutations.spec.js)서 찾을 수 있습니다.
6 |
7 | ## 뮤테이션 생성하기
8 |
9 | 뮤테이션은 일정한 패턴을 따르는 경향이 있습니다. 몇 가지 데이터를 얻기 위해서, 몇 가지 프로세스를 거치고, 그러고 나서 상태(state)에 데이터를 할당합니다. `ADD_POST` 뮤테이션의 개요는 다음과 같습니다. ADD_POST 뮤테이션은 한번 실행했을 때, 페이로드(payload)에서 `post` 객체를 받습니다. 그리고 `post.id`를 `state.postIds`에 추가합니다. 키 값이 `post.id`인 `state.posts` 객체에 post.id도 추가합니다. 이런 형태는 Vuex를 사용하는 앱의 일반적인 패턴입니다.
10 |
11 | TDD로 개발 해보겠습니다. 뮤테이션의 시작은 아래와 같습니다.
12 |
13 | ```js
14 | export default {
15 | SET_POST(state, { post }) {
16 |
17 | }
18 | }
19 | ```
20 |
21 | 테스트를 작성하겠습니다. 에러 메시지가 어떻게 개발해야 할지 인도해 줄 것입니다.
22 |
23 | ```js
24 | import mutations from "@/store/mutations.js"
25 |
26 | describe("SET_POST", () => {
27 | it("상태에 post를 추가한다", () => {
28 | const post = { id: 1, title: "Post" }
29 | const state = {
30 | postIds: [],
31 | posts: {}
32 | }
33 |
34 | mutations.SET_POST(state, { post })
35 |
36 | expect(state).toEqual({
37 | postIds: [1],
38 | posts: { "1": post }
39 | })
40 | })
41 | })
42 | ```
43 |
44 | `yarn test:unit`으로 테스트를 실행하면 아래와 같은 실패 메세지를 산출합니다.
45 |
46 | ```
47 | FAIL tests/unit/mutations.spec.js
48 | ● SET_POST › adds a post to the state
49 |
50 | expect(received).toEqual(expected)
51 |
52 | Expected value to equal:
53 | {"postIds": [1], "posts": {"1": {"id": 1, "title": "Post"}}}
54 | Received:
55 | {"postIds": [], "posts": {}}
56 | ```
57 |
58 | `state.postIds`에 `post.id`를 추가해보겠습니다.
59 |
60 | ```js
61 | export default {
62 | SET_POST(state, { post }) {
63 | state.postIds.push(post.id)
64 | }
65 | }
66 | ```
67 |
68 | 이제 `yarn test:unit`은 아래와 같은 메세지를 산출합니다.
69 |
70 | ```
71 | Expected value to equal:
72 | {"postIds": [1], "posts": {"1": {"id": 1, "title": "Post"}}}
73 | Received:
74 | {"postIds": [1], "posts": {}}
75 | ```
76 |
77 | `postIds`는 좋아 보입니다. 이제 `state.posts`에 post를 추가해야 합니다. Vue의 반응성 시스템이 작동하는 방법 때문에, 간단하게 `post[post.id] = post`를 작성해서 post를 추가할 수는 없습니다. 좀 더 세부적인 내용은 [여기](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)에서 찾을 수 있습니다. 기본적으로 `Object.assign`이나 `...` 연산자를 사용해서 새로운 객체를 만들어야 합니다. 여기서는 `...` 연산자를 사용해서 `state.posts`에 post를 할당하겠습니다.
78 |
79 | ```js
80 | export default {
81 | SET_POST(state, { post }) {
82 | state.postIds.push(post.id)
83 | state.posts = { ...state.posts, [post.id]: post }
84 | }
85 | }
86 | ```
87 |
88 | 이제 테스트가 통과합니다!
89 |
90 | ## 결론
91 |
92 | Vuex 뮤테이션을 테스트 할 때는 Vue나 Vuex에서 어떤 특별한 것도 요구하지 않습니다. Vuex 뮤테이션이 단지 일반적인 자바스크립트 함수이기 때문입니다. 유의해야 하는 유일한 부분은 Vue의 반응성 경고입니다. 이 경고는 Vuex에도 마찬가지로 적용됩니다. 반응성 시스템과 일반적인 경고에 대해 좀 더 자세히 알고 싶다면 [여기](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)에서 해당 내용에 대해 읽을 수 있습니다.
93 |
94 | 이 페이지는 아래와 같은 내용에 대해 다뤘습니다.
95 |
96 | - Vuex 뮤테이션은 일반 자바스크립트 함수이다
97 | - 뮤테이션은 main Vue app에서 독립적으로 테스트할 수 있으며, 테스트해야 한다
98 |
99 | 위 예제에서 사용한 테스트는 [여기](https://github.com/lmiller1990/vue-testing-handbook/blob/master/demo-app/tests/unit/mutations.spec.js)에서 찾을 수 있습니다.
100 |
--------------------------------------------------------------------------------
/src/rendering-a-component.md:
--------------------------------------------------------------------------------
1 | :::tip This book is written for Vue.js 2 and Vue Test Utils v1.
2 | Find the Vue.js 3 version [here](/v3/).
3 | :::
4 |
5 | ## Two ways to render
6 |
7 | `vue-test-utils` provides two ways to render, or __mount__ a component - `mount` and `shallowMount`. A component mounted using either of these methods returns a `wrapper`, which is an object containing the Vue component, plus some useful methods for testing.
8 |
9 | Let's start off with two simple components:
10 |
11 | ```js
12 | const Child = Vue.component("Child", {
13 | name: "Child",
14 |
15 | template: "
55 | ```
56 |
57 | Which is the completely rendered markup of `Parent` and `Child`. `shallowWrapper.html()`, on the other hand, produces this:
58 |
59 | ```html
60 |
61 | ```
62 |
63 | The place where `` should be has been replaced by ``. `shallowMount` renders regular html elements, but replaces Vue components with a stub.
64 |
65 | > A stub is kind of a "fake" object that stands in for a real one.
66 |
67 | This can be useful. Imagine you want to test your `App.vue` component, that looks like this:
68 |
69 | ```vue
70 |
71 |
72 |
My Vue App
73 |
74 |
75 |
76 | ```
77 |
78 | And we want to test `
My Vue App
` is rendered correctly. We also have a `` component, that makes a request to an external API in its `mounted` lifecycle hook.
79 |
80 | If we use `mount`, although all we want to do is assert some text is rendered, `` will make an API request. This will make our test slow and prone to failure. So, we stub out external dependencies. By using `shallowMount`, `` will be replaced with a ``, and the API call will not be initiated.
81 |
82 | As a rule of thumb, you should try to use `mount`, since that will more closely resemble your components and how they will appear in a real environment. That said, if you are having trouble with many API requests firing, or supplying the necessary dependencies to render your component, you can use `shallowMount`.:
83 |
--------------------------------------------------------------------------------
/src/ru/README.md:
--------------------------------------------------------------------------------
1 | :::tip Это руководство было написано для Vue.js 2 и Vue Test Utils v1.
2 | Версия для Vue.js 3 [здесь](/v3/ru).
3 | :::
4 |
5 | ## О чём это руководство?
6 |
7 | Добро пожаловать в руководство по тестированию Vue приложений!
8 |
9 | Здесь собрана коллекция коротких примеров тестирования компонентов с использованием `vue-test-utils` – официальной библиотекой для тестирования vue компонентов. Также используется `Jest` – современный фреймворк для тестирования. Рассматривается `vue-test-utils` API и лучшие практики тестирования.
10 |
11 | Руководство написано так, что его главы независимы одна от другой. Мы начнём с настройки окружения с помощью `vue-cli` и написания простейших тестов. Затем изучим два способа отрисовки компонентов – `mount` и `shallowMount`, поймём разницу между ними.
12 |
13 | Затем разберём несколько сценариев, которые возникают при тестировании компонентов:
14 |
15 | - принятие входных параметров
16 | - использование вычисляемых свойств
17 | - отрисовка других компонентов
18 | - пользовательские события
19 |
20 | и так далее. Потренируемся на таких интересных кейсах, как:
21 |
22 | - тестирование Vuex в компонентах и изоляции
23 | - тестирование Vue router
24 | - тестирование сторонних компонентов
25 |
26 | Также поработаем с Jest API, сделаем наши тесты более надёжными:
27 |
28 | - замокаем API ответы
29 | - замокаем модули и добавим spies (шпионы)
30 | - используем снимки
31 |
32 | ## Дальнейшее чтение
33 |
34 | Другие полезные ресурсы:
35 |
36 | - [Официальная документация](https://vue-test-utils.vuejs.org/ru/)
37 | - Мой курс [Vue.js 3 + Composition API + Unit Testing](https://vuejs-course.com)
38 | - [Бесплатный курс на VueSchool](https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vth)
39 |
--------------------------------------------------------------------------------
/src/ru/jest-mocking-modules.md:
--------------------------------------------------------------------------------
1 | :::tip Это руководство было написано для Vue.js 2 и Vue Test Utils v1.
2 | Версия для Vue.js 3 [здесь](/v3/ru).
3 | :::
4 |
5 | ## Мокаем модули
6 |
7 | Не совсем про Vue тестирование, больше о Jest. Jest много где применяется на протяжении всего руководства, становится популярнее в индустрии, поэтому я считаю, он заслужил отдельной секции.
8 |
9 | Некоторые идеи:
10 |
11 | 1. Ссылки на секции руководства, где применяется Jest
12 | 2. Поговорить о различных видах мок и их применении во Vue тестировании
13 |
14 | - создаваемые вручную моки
15 | - моки для ES6 классов
16 | - автоматические моки
17 | - вызов `mockImplentation`?
18 |
19 | Источник: https://jestjs.io/docs/en/es6-class-mocks#the-4-ways-to-create-an-es6-class-mock
20 |
--------------------------------------------------------------------------------
/src/ru/rendering-a-component.md:
--------------------------------------------------------------------------------
1 | :::tip Это руководство было написано для Vue.js 2 и Vue Test Utils v1.
2 | Версия для Vue.js 3 [здесь](/v3/ru).
3 | :::
4 |
5 | ## Два способа отрисовки
6 |
7 | `vue-test-utils` позволяет отрисовывать компонент двумя способами – `mount` и `shallowMount`. В любом из этих случаев, метод вернёт так называемый `wrapper`, который содержит объект с Vue компонентом и некоторыми полезными методами для тестирования.
8 |
9 | Давайте разберёмся на двух простых компонентах:
10 |
11 | ```js
12 | const Child = Vue.component("Child", {
13 | name: "Child",
14 |
15 | template: "
56 | ```
57 |
58 | Полностью повторяется разметка `Parent` и `Child`. Однако `shallowWrapper.html()` выводит следующее:
59 |
60 | ```html
61 |
62 | ```
63 |
64 | То место, где должен быть `` теперь занимает ``. `shallowMount` отрисовывает обычный html, но заменяет Vue-компоненты на заглушки.
65 |
66 | > Под заглушкой (stub) понимают поддельный объект, который помещается вместо настоящего.
67 |
68 | Это может быть полезно. Представьте, вы хотите протестировать компонент `App.vue`, который выглядит так:
69 |
70 | ```vue
71 |
72 |
73 |
Моё Vue-приложение
74 |
75 |
76 |
77 | ```
78 |
79 | И мы хотим протестировать, что `
Моё Vue-приложение
` выводится правильно. У нас также есть компонент ``, который делает запросы к стороннему API в своём `mounted` хуке.
80 |
81 | Если мы используем `mount`, то `` сделает запрос к API, хотя мы хотим всего лишь проверить отрисовку текста. Это сделает наши тесты медленными и ненадёжными. Поэтому мы применяем заглушки для сторонних зависимостей. Используя `shallowMount`, компонент `` заменится на `` и запроса к API не произойдёт.
82 |
83 | Как правило, вы должны использовать `mount`, поскольку это будет отражать поведение компонента в реальной среде. Тем не менее, если у вас возникли проблемы с выполнением множественных запросов API или с предоставлением необходимых зависимостей для рендеринга вашего компонента – вы можете использовать `shallowMount`.
84 |
--------------------------------------------------------------------------------
/src/ru/testing-vuex.md:
--------------------------------------------------------------------------------
1 | :::tip Это руководство было написано для Vue.js 2 и Vue Test Utils v1.
2 | Версия для Vue.js 3 [здесь](/v3/ru).
3 | :::
4 |
5 | ## Тестирование Vuex
6 |
7 | В следующих статьях обсудим как тестировать Vuex.
8 |
9 | ## Две стороны тестирования Vuex
10 |
11 | Обычно компоненты взаимодействуют с Vuex так:
12 |
13 | 1. вызываем мутацию через `commit`
14 | 2. запускаем действия через `dispatch`
15 | 3. обращаемся к хранилищу через `$store.state` или геттеры
16 |
17 | В тестах проверяется, что компонент ведёт себя правильно при текущем состоянии хранилища Vuex. Они не должны знать о реализациях мутаций, действий, геттеров.
18 |
19 | Любая логика хранилища, такая как мутация или использование геттеров, должна тестироваться в изоляции. Для Vuex достаточно просто писать модульные тесты, так как он хранит в себе простые JavaScript функции.
20 |
21 | В следующей статье разберём некоторые техники тестирования компонентов с использованием Vuex, убедимся, что их поведение зависит от состояния хранилища. Чуть позже обсудим тестирование Vuex в изоляции.
22 |
--------------------------------------------------------------------------------
/src/testing-vuex.md:
--------------------------------------------------------------------------------
1 | :::tip This book is written for Vue.js 2 and Vue Test Utils v1.
2 | Find the Vue.js 3 version [here](/v3/).
3 | :::
4 |
5 | ## Testing Vuex
6 |
7 | The next few guides discuss testing Vuex.
8 |
9 | ## Two Sides of Testing Vuex
10 |
11 | Generally components will interact with Vuex by
12 |
13 | 1. committing a mutation
14 | 2. dispatching an action
15 | 3. access the state via `$store.state` or getters
16 |
17 | These tests are to assert that the component behaves correctly based on the current state of the Vuex store. They do not need to know about the implementation of the mutators, actions or getters.
18 |
19 | Any logic performed by the store, such as mutations and getters, can be tested in isolation. Since Vuex stores are comprised of regular JavaScript functions, they are easily unit tested.
20 |
21 | The first few guides discuss techniques to test Vuex in isolation considering mutations, actions and getters. Following guides introduce some techniques to test components that use a Vuex store, and ensure they behave correctly based on the store's state.
22 |
--------------------------------------------------------------------------------
/src/v3/README.md:
--------------------------------------------------------------------------------
1 | :::tip This book is written for Vue.js 3 and Vue Test Utils v2.
2 | Find the Vue.js 2 version [here](/).
3 | :::
4 |
5 | ## What is this guide?
6 |
7 | Welcome to the Vue.js testing handbook!
8 |
9 | This is a collection of short, focused examples on how to test Vue components. It uses `vue-test-utils`, the official library for testing Vue components, and Jest, a modern testing framework. It covers the `vue-test-utils` API, as well as best practises for testing components.
10 |
11 | Each section is independent from the others. We start off by setting up an environment with `vue-cli` and writing a simple test. Next, two ways to render a component are discussed - `mount` and `shallowMount`. The differences will be demonstrated and explained.
12 |
13 | From then on, we cover how to test various scenarios that arise when testing components, such as testing components that:
14 |
15 | - receive props
16 | - use computed properties
17 | - render other components
18 | - emit events
19 |
20 | and so forth. We then move on to more interesting cases, such as:
21 |
22 | - best practises for testing Vuex (in components, and independently)
23 | - testing Vue router
24 | - testing involving third party components
25 |
26 | We will also explore how to use the Jest API to make our tests more robust, such as:
27 |
28 | - mocking API responses
29 | - mocking and spying on modules
30 | - using snapshots
31 |
32 | ## Further Reading
33 |
34 | Other useful resources include:
35 |
36 | - [Official docs](https://vue-test-utils.vuejs.org/v2/guide/introduction.html)
37 | - I made free series on Vue Test Utils + Vue 3: [YouTube playlist](https://www.youtube.com/playlist?list=PLC2LZCNWKL9ahK1IoODqYxKu5aA9T5IOA)
38 | - My [Vue.js 3 + Unit Testing Course](https://vuejs-course.com). VUEJS_COURSE_10_OFF for a $10 discount!
39 | - [This course on VueSchool](https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vth) by several Vue core contributors
40 |
--------------------------------------------------------------------------------
/src/v3/jest-mocking-modules.md:
--------------------------------------------------------------------------------
1 | :::tip This book is written for Vue.js 3 and Vue Test Utils v2.
2 | Find the Vue.js 2 version [here](/).
3 | :::
4 |
5 | ## Mocking Modules
6 |
7 | TODO: Write this article. Interested? Open an issue, let's chat!
8 |
9 | Not directly related to Vue testing, more specific to Jest. Jest is used heavily throughout this handbook, though, and becoming widely adopted in the industry, so I think it deserves a section.
10 |
11 | Some ideas:
12 |
13 | 1. Reference the sections of the existing guide using Jest
14 | 2. Talk about the different kind of mocks and their use cases for Vue testing
15 |
16 | - Manual mocks
17 | - ES6 class mocks
18 | - automatic mock
19 | - calling `mockImplentation`?
20 |
21 | Ref: https://jestjs.io/docs/en/es6-class-mocks#the-4-ways-to-create-an-es6-class-mock
22 |
--------------------------------------------------------------------------------
/src/v3/rendering-a-component.md:
--------------------------------------------------------------------------------
1 | :::tip This book is written for Vue.js 3 and Vue Test Utils v2.
2 | Find the Vue.js 2 version [here](/).
3 | :::
4 |
5 | ## Two ways to render
6 |
7 | `vue-test-utils` provides two ways to render, or __mount__ a component - `mount` and `shallowMount`. A component mounted using either of these methods returns a `wrapper`, which is an object containing the Vue component, plus some useful methods for testing.
8 |
9 | Let's start off with two simple components:
10 |
11 | ```js
12 | const Child = Vue.component("Child", {
13 | name: "Child",
14 |
15 | template: "
55 | ```
56 |
57 | Which is the completely rendered markup of `Parent` and `Child`. `shallowWrapper.html()`, on the other hand, produces this:
58 |
59 | ```html
60 |
61 | ```
62 |
63 | The place where `` should be has been replaced by ``. `shallowMount` renders regular html elements, but replaces Vue components with a stub.
64 |
65 | > A stub is kind of a "fake" object that stands in for a real one.
66 |
67 | This can be useful. Imagine you want to test your `App.vue` component, that looks like this:
68 |
69 | ```vue
70 |
71 |
72 |
My Vue App
73 |
74 |
75 |
76 | ```
77 |
78 | And we want to test `
My Vue App
` is rendered correctly. We also have a `` component, that makes a request to an external API in its `mounted` lifecycle hook.
79 |
80 | If we use `mount`, although all we want to do is assert some text is rendered, `` will make an API request. This will make our test slow and prone to failure. So, we stub out external dependencies. By using `shallowMount`, `` will be replaced with a ``, and the API call will not be initiated.
81 |
82 | As a rule of thumb, you should try to use `mount`, since that will more closely resemble your components and how they will appear in a real environment. That said, if you are having trouble with many API requests firing, or supplying the necessary dependencies to render your component, you can use `shallowMount`.:
83 |
--------------------------------------------------------------------------------
/src/v3/ru/README.md:
--------------------------------------------------------------------------------
1 | :::tip Это руководство было написано для Vue.js 3 и Vue Test Utils v2.
2 | Версия для Vue.js 2 [здесь](/ru).
3 | :::
4 |
5 | ## О чём это руководство?
6 |
7 | Добро пожаловать в руководство по тестированию Vue приложений!
8 |
9 | Здесь собрана коллекция коротких примеров тестирования компонентов с использованием `vue-test-utils` – официальной библиотекой для тестирования vue компонентов. Также используется `Jest` – современный фреймворк для тестирования. Рассматривается `vue-test-utils` API и лучшие практики тестирования.
10 |
11 | Руководство написано так, что его главы независимы одна от другой. Мы начнём с настройки окружения с помощью `vue-cli` и написания простейших тестов. Затем изучим два способа отрисовки компонентов – `mount` и `shallowMount`, поймём разницу между ними.
12 |
13 | Затем разберём несколько сценариев, которые возникают при тестировании компонентов:
14 |
15 | - принятие входных параметров
16 | - использование вычисляемых свойств
17 | - отрисовка других компонентов
18 | - пользовательские события
19 |
20 | и так далее. Потренируемся на таких интересных кейсах, как:
21 |
22 | - тестирование Vuex в компонентах и изоляции
23 | - тестирование Vue router
24 | - тестирование сторонних компонентов
25 |
26 | Также поработаем с Jest API, сделаем наши тесты более надёжными:
27 |
28 | - замокаем API ответы
29 | - замокаем модули и добавим spies (шпионы)
30 | - используем снимки
31 |
32 | ## Дальнейшее чтение
33 |
34 | Другие полезные ресурсы:
35 |
36 | - [Официальная документация](https://vue-test-utils.vuejs.org/ru/)
37 | - [Книга](https://www.manning.com/books/testing-vue-js-applications), написанная авторами `vue-test-utils`
38 | - Мой курс [Vue.js 3 + Composition API + Unit Testing](https://vuejs-course.com)
39 | - [Бесплатный курс на VueSchool](https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vth)
40 |
--------------------------------------------------------------------------------
/src/v3/ru/jest-mocking-modules.md:
--------------------------------------------------------------------------------
1 | :::tip Это руководство было написано для Vue.js 3 и Vue Test Utils v2.
2 | Версия для Vue.js 2 [здесь](/ru).
3 | :::
4 |
5 | ## Мокаем модули
6 |
7 | Не совсем про Vue тестирование, больше о Jest. Jest много где применяется на протяжении всего руководства, становится популярнее в индустрии, поэтому я считаю, он заслужил отдельной секции.
8 |
9 | Некоторые идеи:
10 |
11 | 1. Ссылки на секции руководства, где применяется Jest
12 | 2. Поговорить о различных видах мок и их применении во Vue тестировании
13 |
14 | - создаваемые вручную моки
15 | - моки для ES6 классов
16 | - автоматические моки
17 | - вызов `mockImplentation`?
18 |
19 | Источник: https://jestjs.io/docs/en/es6-class-mocks#the-4-ways-to-create-an-es6-class-mock
20 |
--------------------------------------------------------------------------------
/src/v3/ru/rendering-a-component.md:
--------------------------------------------------------------------------------
1 | :::tip Это руководство было написано для Vue.js 3 и Vue Test Utils v2.
2 | Версия для Vue.js 2 [здесь](/ru).
3 | :::
4 |
5 | ## Два способа отрисовки
6 |
7 | `vue-test-utils` позволяет отрисовывать компонент двумя способами – `mount` и `shallowMount`. В любом из этих случаев, метод вернёт так называемый `wrapper`, который содержит объект с Vue компонентом и некоторыми полезными методами для тестирования.
8 |
9 | Давайте разберёмся на двух простых компонентах:
10 |
11 | ```js
12 | const Child = Vue.component("Child", {
13 | name: "Child",
14 |
15 | template: "
56 | ```
57 |
58 | Полностью повторяется разметка `Parent` и `Child`. Однако `shallowWrapper.html()` выводит следующее:
59 |
60 | ```html
61 |
62 | ```
63 |
64 | То место, где должен быть `` теперь занимает ``. `shallowMount` отрисовывает обычный html, но заменяет Vue-компоненты на заглушки.
65 |
66 | > Под заглушкой (stub) понимают поддельный объект, который помещается вместо настоящего.
67 |
68 | Это может быть полезно. Представьте, вы хотите протестировать компонент `App.vue`, который выглядит так:
69 |
70 | ```vue
71 |
72 |
73 |
Моё Vue-приложение
74 |
75 |
76 |
77 | ```
78 |
79 | И мы хотим протестировать, что `
Моё Vue-приложение
` выводится правильно. У нас также есть компонент ``, который делаем запросы к стороннему API в своём `mounted` хуке.
80 |
81 | Если мы используем `mount`, то `` сделает запрос к API, хотя мы хотим всего лишь проверить отрисовку текста. Это сделаем наши тесты медленными и ненадёжными. Поэтому мы применяем заглушки для сторонних зависимостей. Используя `shallowMount`, компонент `` заменится на `` и запроса к API не произойдёт.
82 |
83 | Как правило, вы должны использовать `mount`, поскольку это будет отражать поведение компонента в реальной среде. Тем не менее, если у вас возникли проблемы с выполнением множественных запросов API или с предоставлением необходимых зависимостей для рендеринга вашего компонента – вы можете использовать `shallowMount`.
84 |
--------------------------------------------------------------------------------
/src/v3/ru/testing-vuex.md:
--------------------------------------------------------------------------------
1 | :::tip Это руководство было написано для Vue.js 3 и Vue Test Utils v2.
2 | Версия для Vue.js 2 [здесь](/ru).
3 | :::
4 |
5 | ## Тестирование Vuex
6 |
7 | В следующих статьях обсудим как тестировать Vuex.
8 |
9 | ## Две стороны тестирования Vuex
10 |
11 | Обычно компоненты взаимодействуют с Vuex так:
12 |
13 | 1. вызываем мутацию через `commit`
14 | 2. запускаем действия через `dispatch`
15 | 3. обращаемся к хранилищу через `$store.state` или геттеры
16 |
17 | В тестах проверяется, что компонент ведёт себя правильно при текущем состоянии хранилища Vuex. Они не должны знать о реализациях мутаций, действий, геттеров.
18 |
19 | Любая логика хранилища, такая как мутация или использование геттеров, должна тестироваться в изоляции. Для Vuex достаточно просто писать модульные тесты, так как он хранит в себе простые JavaScript функции.
20 |
21 | В следующей статье разберём некоторые техники тестирования компонентов с использованием Vuex, убедимся, что их поведение зависит от состояния хранилища. Чуть позже обсудим тестирование Vuex в изоляции.
22 |
--------------------------------------------------------------------------------
/src/v3/testing-vuex.md:
--------------------------------------------------------------------------------
1 | :::tip This book is written for Vue.js 3 and Vue Test Utils v2.
2 | Find the Vue.js 2 version [here](/).
3 | :::
4 |
5 | ## Testing Vuex
6 |
7 | The next few guides discuss testing Vuex.
8 |
9 | ## Two Sides of Testing Vuex
10 |
11 | Generally components will interact with Vuex by
12 |
13 | 1. committing a mutation
14 | 2. dispatching an action
15 | 3. access the state via `$store.state` or getters
16 |
17 | These tests are to assert that the component behaves correctly based on the current state of the Vuex store. They do not need to know about the implementation of the mutators, actions or getters.
18 |
19 | Any logic performed by the store, such as mutations and getters, can be tested in isolation. Since Vuex stores are comprised of regular JavaScript functions, they are easily unit tested.
20 |
21 | The first few guides discuss techniques to test Vuex in isolation considering mutations, actions and getters. Following guides introduce some techniques to test components that use a Vuex store, and ensure they behave correctly based on the store's state.
22 |
--------------------------------------------------------------------------------
/src/zh-CN/README.md:
--------------------------------------------------------------------------------
1 | ## 这本指南是什么？
2 |
3 | 欢迎来到 Vue.js 测试指南！
4 |
5 | 这是一系列关于如何测试 Vue 组件的短小而目标明确的示例。它使用了测试 Vue 组件的官方库 [`vue-test-utils`](https://github.com/vuejs/vue-test-utils)，以及一个现代测试框架 [Jest](https://jestjs.io/)。本书不但涵盖了 `vue-test-utils` 的 API，而且也是测试组件的最佳实践。
6 |
7 | 每个章节都是互相独立的。我们从通过 `vue-cli` 设置一个环境并编写一个简单的测试起步。而后，讨论了两种渲染一个组件的方式 -- `mount` 和 `shallowMount`。其区别将被演示和说明。
8 |
9 | 从那时起，我们覆盖了如何应对测试组件时出现的各种情景，诸如：
10 |
11 | - 接受 props
12 | - 使用 computed 属性
13 | - 渲染其他组件
14 | - emit 事件
15 |
16 | 等等。其后我们继续向更多有趣的场景进发，比如：
17 |
18 | - 测试 Vuex (在组件中，并且是独立的) 的最佳实践
19 | - 测试 Vue router
20 | - 测试包含的第三方组件
21 |
22 | 我们也将探索如何使用 Jest API 让我们的测试更健壮，如：
23 |
24 | - mocking API 响应
25 | - 模块上的 mocking 和 spying
26 | - 使用 snapshots
27 |
28 | ## 延伸阅读
29 |
30 | 更多有用的资源包括：
31 |
32 | - [Official docs](https://vue-test-utils.vuejs.org/)
33 | - [Book](https://www.manning.com/books/testing-vue-js-applications) 另一位作者写的 `vue-test-utils`
34 | - [This awesome course on VueSchool](https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vth) 由多位 Vue 核心贡献者编写
35 |
--------------------------------------------------------------------------------
/src/zh-CN/jest-mocking-modules.md:
--------------------------------------------------------------------------------
1 | ## Mocking Modules
2 |
3 | TODO: Write this article. Interested? Open an issue, let's chat!
4 |
5 | Not directly related to Vue testing, more specific to Jest. Jest is used heavily throughout this handbook, though, and becoming widely adopted in the industry, so I think it deserves a section.
6 |
7 | Some ideas:
8 |
9 | 1. Reference the sections of the existing guide using Jest
10 | 2. Talk about the different kind of mocks and their use cases for Vue testing
11 |
12 | - Manual mocks
13 | - ES6 class mocks
14 | - automatic mock
15 | - calling `mockImplentation`?
16 |
17 | Ref: https://jestjs.io/docs/en/es6-class-mocks#the-4-ways-to-create-an-es6-class-mock
18 |
--------------------------------------------------------------------------------
/src/zh-CN/rendering-a-component.md:
--------------------------------------------------------------------------------
1 | ## 两种渲染方式
2 |
3 | `vue-test-utils` 提供了两种方式用于渲染，或者说 __加载（mount）__ 一个组件 -- `mount` 和 `shallowMount`。一个组件无论使用这两种方法的哪个都会返回一个 `wrapper`，也就是一个包含了 Vue 组件的对象，辅以一些对测试有用的方法。
4 |
5 | 让我们从两个简单的组件开始：
6 |
7 | ```js
8 | const Child = Vue.component("Child", {
9 | name: "Child",
10 |
11 | template: "
4 |