寫測試時，我們基本需要三樣東西

• Enzyme
• Enzyme跟React溝通的適配器(Adapter)
• 在Enzyme裡，我們要使用的渲染方式 (Shallow)

我們先拿App.test.js來做個小測試，所以打開App.test.js ~

首先 ! 我們要先import上述三樣基本東西

import Enzyme,{shallow} from 'enzyme';
import EnzymeAdapter from '@wojtekmaj/enzyme-adapter-react-17';

接著我們要告訴Enzyme我們要用的適配器是什麼版本的

Enzyme.configure({adapter:new EnzymeAdapter()});

再來，就可以開始寫我們的測試了 ，

我們先來個簡單的 ! 來測試看看我們的App是不是正常渲染出畫面。

首先，用Jest裡的test function來建立一個測試

test('renders App', () => {
 
});

接下來我們就要寫測試的內容了，將我們渲染的App裝在一個常數裡

test('renders learn react link', () => {
  const wrapper= shallow(<App/>);

});

然後就可以在我們的專案目錄下執行 npm test

如果passed，那代表測試跑成功囉!

Shallow 底下有個function => debug() 可以把DOM用文字的方式顯示出來

 wrapper.debug();

測試權衡

• 前面有提到我們為何要寫測試 => 我們寫測試的目的是為了要測試APP應該要做什麼，而不是APP是怎麼運作的
• 最好是要達到修改程式後，不用修改測試程式碼的目的。
• 測試的步驟
  • 設定初始值 (initial state)
  • 模擬動作 (ex: button click之類的)
  • 檢查特定的function是否該被呼叫

下一篇! 我們要來說明前面提到的Enzyme的兩個渲染API，及幾個JEST的function，

還有兩個寫測試的訣竅~撐住啊!!! 下一篇就進入到一半了~