測試 React 元件
使用 Jest 和 react-testing-library 測試你的第一個 React 元件 開始測試 React 元件最簡單的方法是使用快照測試。快照測試是一種讓你在獨立環境中測試元件的技術。 如果你對軟體測試很熟悉，這就像你為類別進行單元測試一樣：你測試每個元件的功能。 我假設你已經使用 create-react-app 創建了一個 React 應用，這個應用已經預先安裝了我們需要的測試套件 Jest。 讓我們從一個簡單的測試開始。CodeSandbox 是一個很好的環境來嘗試這個。在 CodeSandbox 中創建一個 React sandbox，並在 components 文件夾中創建一個 App.js 元件，然後添加一個 App.test.js 文件。 import React from 'react' export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ) } 我們的第一個測試很簡單： test('First test', () => { expect(true).toBeTruthy() }) 當 CodeSandbox 檢測到測試文件時，它會自動執行這些測試，你可以點擊視圖底部的 “Tests” 按鈕來查看測試結果： 一個測試文件可以包含多個測試： 現在讓我們做一些更有用的事情，實際上測試一個 React 元件。我們現在只有一個沒有實際用途的 App 元件，所以讓我們先設置一個具有更多功能的小應用程式環境：我們之前構建的計數器應用程式。如果你跳過了這部分，你可以返回並閱讀我們是如何構建它的，但為了方便參考，我在這裡再次添加一遍。...