上一篇針對了計數器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!

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

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

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

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