Hai cách để biểu diễn (render)
vue-test-utils
cung cấp 2 cách để render, hoăc mount một component – mount
và shallowMount
. Một component được mounted bằng một trong hai phương thức trả về một wrapper
, là một đối tượng chứa Vue component, kèm theo đó là một số phương thức để kiểm thử.
Chúng ta bắt đầu với hai components đơn giản:
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="token keyword">const</span> Child <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">"Child"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"Child"</span><span class="token punctuation">,</span> template<span class="token punctuation">:</span> <span class="token string">"<div>Child component</div>"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">const</span> Parent <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">"Parent"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">"Parent"</span><span class="token punctuation">,</span> template<span class="token punctuation">:</span> <span class="token string">"<div><child /></div>"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Cúng ta bắt đầù rendering Child
và gọi phương thức html
mà vue-test-utils
cung cấp để kiểm tra markup.
1 2 3 4 5 6 |
<span class="token keyword">const</span> shallowWrapper <span class="token operator">=</span> <span class="token function">shallowMount</span><span class="token punctuation">(</span>Child<span class="token punctuation">)</span> <span class="token keyword">const</span> mountWrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Child<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>shallowWrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mountWrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
Cả hai mountWrapper.html()
và shallowWrapper.html()
sẽ cho kết quả như sau:
1 2 |
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Child component<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Không có sự khác biệt, vậy chúng ta sẽ thử làm cách kiểm tra tương tự đối với Parent
?
1 2 3 4 5 6 |
<span class="token keyword">const</span> shallowWrapper <span class="token operator">=</span> <span class="token function">shallowMount</span><span class="token punctuation">(</span>Parent<span class="token punctuation">)</span> <span class="token keyword">const</span> mountWrapper <span class="token operator">=</span> <span class="token function">mount</span><span class="token punctuation">(</span>Parent<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>shallowWrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>mountWrapper<span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
mountWrapper.html()
bây giờ là:
1 2 |
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Child component<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Parent
và Child
đều render giống nhau. Mặt khác, shallowWrapper.html()
ra được kết quả như sau:
1 2 |
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vuecomponent-stub</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vuecomponent-stub</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Ở <Child />
được thay thế bởi <vuecomponent-stub />
. shallowMount
render các thành phần html thông thường, nhưng thay thế các thành phần components của Vue bằng stub.
Stub là một loại đối tượng “giả” đại diện cho một đối tượng thực sự.
Hãy tưởng tượng bạn muốn kiếm tra App.vue
của mình, trông giống như thế này:
1 2 3 4 5 6 7 |
<template> <div> <h1>My Vue App</h1> <fetch-data /> </div> </template> |
Và chúng ta muốn kiểm thử <h1>My Vue App</h1>
sẽ được rendered chính xác. Chúng ta cũng có component <fetch-data>
, sẽ gọi request API bên ngoài trong mounted
của lifecycle hook.
Nếu chúng ta sử dụng mount
, mặc dù tất cả những gì chúng ta muốn làm là kiểm tra so sánh văn bản được rendered, <fetch-data />
sẽ gọi request API. Điều này sẽ làm cho quá trình kiểm thử của chúng ta bị chậm và dễ dàng bị fail do quá nhiều thứ khó kiểm soát. Vì vậy, chúng ta sử dụng stub để tạo như là một đối tượng thực sự. Bằng cách sử dụng shallowMount
, <fetch-data />
sẽ được thay thế bằng một <vuecomponent-stub />
, và lệnh gọi request API sẽ không cần sử dụng đến nó.
Reference
Dịch từ: https://lmiller1990.github.io/vue-testing-handbook/rendering-a-component.html