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