您好,登錄后才能下訂單哦!
Jest 是一個流行的 JavaScript 測試框架,可以與 React Hooks 一起使用來進行組件和功能的單元測試
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
jest.config.js
文件,添加以下內容:module.exports = {
preset: "react",
testEnvironment: "jsdom",
};
useCounter.js
的自定義 Hooks 文件,內容如下:import { useState } from "react";
const useCounter = (initialValue = 0) => {
const [count, setCount] = useState(initialValue);
const increment = () => {
setCount((prevCount) => prevCount + 1);
};
const decrement = () => {
setCount((prevCount) => prevCount - 1);
};
return { count, increment, decrement };
};
export default useCounter;
為此 Hooks 編寫測試用例 useCounter.test.js
:
import { renderHook, act } from "@testing-library/react-hooks";
import useCounter from "./useCounter";
describe("useCounter", () => {
it("should increment counter", () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.increment();
});
expect(result.current.count).toBe(1);
});
it("should decrement counter", () => {
const { result } = renderHook(() => useCounter());
act(() => {
result.current.decrement();
});
expect(result.current.count).toBe(-1);
});
});
package.json
中添加一個名為 test
的腳本:"scripts": {
"test": "jest"
}
然后運行 npm test
,Jest 將自動查找并運行所有測試用例。
這只是一個簡單的示例,實際上你可以根據需要編寫更復雜的測試用例來覆蓋各種場景。記住始終確保在執行任何副作用(例如 API 調用)之前使用 act()
函數包裝操作。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。