iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 22

【Day22】判斷計數器數字初始值是否為0且按下增加的按鈕時結果是否正確 「(°ヘ°)

上一篇針對了計數器Component做了三個單元測試,
Component、計數器按鈕、計數器的數字是否正常顯示,

還少了兩個單元測試 => 計數器數字的初始值及按下按鈕是否為我們要的結果


廢話不多說!! 來吧! 先來看看計數器數字的初始值是不是我們要的 (通常是0啦~)

首先,一樣建立一個單元測試,並給予測試的名稱。

test("counter start at 0",()=>{

});

一樣先透過我們先前撰寫的共用function來渲染出我們的Component

test("counter start at 0",()=>{

  const wrapper=setup();

});

接著一樣從我們渲染出的Component上找到放置數字的DOM,
且透過text這個function來取得該DOM的文字

test("counter start at 0",()=>{

  const wrapper=setup();

  const count=findByTestAttribute(wrapper,"count").text();


});

最後我們要看這個文字是不是0

test("counter start at 0",()=>{

  const wrapper=setup();

  const count=findByTestAttribute(wrapper,"count").text();

  expect(count).toBe("0");

});

先執行看看npm test 結果是不是Success!


如果結果為Success的話,那就往下一個單元測試前進 ! =>按下按鈕的結果是否為我們預期的

首先,我們一樣要使用共用function來渲染出Component且取得按鈕DOM

test("clicking on button increments counter display",()=>{

    const wrapper = setup();
	const button=findByTestAttribute(wrapper,'increment-button');
});

比較特別的是,當我們要模擬事件動作的時候,我們是透過simulate這個API去進行,

利用所找到的按鈕DOM透過simulate去進行Click動作

test("clicking on button increments counter display",()=>{

    const wrapper = setup();
	const button=findByTestAttribute(wrapper,'increment-button');
	button.simulate('click');
});

按完按鈕後,來檢查計數器的數字是否為1
(如果在Component裡的function是累加別的數字的話,那就判斷按下按鈕是否為該數字)

找到數字顯示的DOM的text後,去判斷是否為1

test("clicking on button increments counter display",()=>{

    const wrapper = setup();
	const button=findByTestAttribute(wrapper,'increment-button');
	button.simulate('click');
	
	const count=findByTestAttribute(wrapper,"count").text();
	expect(count).toBe("1");
	
});

存檔後,測試會自動重新跑一次,沒有問題的話結果會是Success!

也就是說...到這邊我們總共有五個單元測試(如下圖)

噹啷 ~ 我們有加號這個按鈕,下一篇,來試試看自己做出減號按鈕吧 ~

完成減號按鈕後,要來統整一下先前所學的東西了 !

再來會花幾篇的篇幅去做一些小小的補充~


上一篇
【Day21】補上data-test屬性及判斷Component和按鈕及數字是否正確顯示(╯✧∇✧)╯
下一篇
【Day23】計數器減號按紐及測試小練習,先別偷看解答R ~ (⁎˃ᆺ˂)
系列文
用Jest和Enzyme來寫React測試吧!!30

尚未有邦友留言

立即登入留言