iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
0
自我挑戰組

Vue應用測試系列 第 22

Day 22. Snapshot Testing for Dynamic Component

Dynamic Component

Dynamic Component的測試也不困難,但由於會有props傳資料,所以有些時候會導致Snapshot Testing Always Failed。

例如我傳入DateTime進Component並且用它來render畫面時,執行測試的時間只要一變你的Test就會Fail。

比較好的做法是去Mock掉取得時間的Function,讓他回傳固定的值。

範例:

test('renders correctly', ()=> {
    const GetDate = jest.spyOn(Date,'now') //Date.now被取代成一個空的 mock function
    const MockedNowTime = new Date('2020')
    
    GetDate.mockImplementation(() => MockedNowTime) // 指定Mocked Value
    ... //掛載Component
    
    GetDate.mockRestore() // 回復成原本的Function
    expect(wrapper.element).toMatchSnapshot()
})

上一篇
Day 21. Snapshot Test
下一篇
Day 23. Server Side Rendering
系列文
Vue應用測試30

尚未有邦友留言

立即登入留言