Vue的單元測試一直是一個有爭議的話題。在測試Vue組件時，我們希望能夠快速準確地模擬子組件的行為。這就涉及到了mock方法的使用。

Mock方法的作用是模擬組件的行為，以便讓我們能夠測試它們。這在復雜的應用程序中尤為重要，因為我們可以測試不同組件之間的交互。

import { shallowMount } from '@vue/test-utils'
import Parent from '@/components/Parent.vue'
import Child from '@/components/Child.vue'
describe('Parent.vue', () =>{
it('renders child component', () =>{
const wrapper = shallowMount(Parent, {
stubs: ['Child'] // 這里使用了mock方法
})
expect(wrapper.contains(Child)).toBe(true)
})
})

使用shallowMount方法可以測試父組件，而且它還允許我們使用mock方法對子組件進行模擬。在這個例子中，我們使用stubs來模擬Child組件。

我們也可以使用mock方法來測試父組件與子組件之間的交互。例如，當點擊子組件中的按鈕時，我們希望檢查它是否正確地更新了父組件的狀態。

import { shallowMount } from '@vue/test-utils'
import Parent from '@/components/Parent.vue'
import Child from '@/components/Child.vue'
describe('Parent.vue', () =>{
it('updates message when button is clicked', () =>{
const wrapper = shallowMount(Parent, {
stubs: ['Child']
})
const childWrapper = wrapper.find(Child)
const button = childWrapper.find('button')
button.trigger('click')
expect(wrapper.vm.message).toBe('Button clicked')
})
})

在這里，我們測試了父組件的狀態是否正確更新，以反映子組件中按鈕的點擊事件。使用mock方法，真正實現了邏輯分離，方便測試人員以及開發者快速精準定位bug。