您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。