首先!! 我們要先來建立一個React專案

執行以下指令來建立專案

 npx create-react-app  專案名稱

如果不是用上述指令來建立專案的話，可以執行以下指令來安裝 JEST

npm install --save-dev jest

專案建立完畢以後，點開src目錄裡會看到App.js (預設的js) 還有App.test.js(App.js的測試)

現在，我們來利用 npm test 來執行測試看看吧 !

(看到以下圖片顯示的，那代表成功執行測試了~)

• 測試是在當程式碼有進行變動時，才會自動重新執行
• 測試失敗的時候會顯示錯誤訊息

這邊補充一下JEST

• Watch Mode => 這個模式是向上述說的，當程式有變動時(存檔後)，測試會自動重新執行
• npm test 相關快捷鍵
  • a- 執行所有測試
  • o- 執行有變動的測試
  • w- 查看快捷鍵
  • q- 結束測試
• JEST 會去執行在src目錄下，名稱含有.test.js的檔案

上面有提到，專案建立完畢後有一個App.test.js的檔案是給App.js用的測試，

來剖析一下單元測試大概的樣子

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

test function 的第一個參數是我們單元測試的名稱，
第二個參數是測試所要執行的function，
expect裡擺的是我們期望的值，expect後面的function有很多很多種，後續會再細談這個部分!

對!!基本的單元測試就是各位所看到的那麼~~~簡單，
那我們該怎麼搭配Enzyme去寫單元測試呢~?

下一篇就要來安裝Enzyme啦~ 然後裝了Enzyme當然要來試用看看它的function!

所以下一篇除了安裝以外，
還會用Enzyme的shallow function 來寫寫看我們的第一個測試囉 !