当我测试自定义钩子组件时，我使用从@testing-library/react’导入的renderhook和从react-dom/test-utils’导入的act。
・src/app.tsx
import "./app.css";import counter from "./component/counter/counter";function app() { return ( );}export default app;
・src/component/counter/counter.tsx
import react, { usestate } from "react";import { usecounter } from "../../hooks/usecounter";const counter = () => {const { count, increment } = usecounter({ initialcount: 10 }); return ( {count}
);};export default counter;
・src/hooks/usecounter.tsx
import react, { usestate } from "react";import { usecounterprops } from "./usecounter.type";type usecounterprops = { initialcount?: number;};export const usecounter = ({ initialcount = 0 }: usecounterprops = {}) => { const [count, setcount] = usestate(initialcount); const increment = () => setcount((prev) => prev + 1); return { count, increment };};
・src/hooks/usecounter.test.tsx
import { renderHook } from "@testing-library/react";import { useCounter } from "./useCounter";import { act } from "react-dom/test-utils";describe("useCounter", () => { test("Should render the initial count", () => { const { result } = renderHook(useCounter, { initialProps: { initialCount: 10 }, }); expect(result.current.count).toBe(10); }); test("Increment the count", () => { const { result } = renderHook(useCounter); act(() => { result.current.increment(); }); expect(result.current.count).toBe(1); });});
当我传递一个props时，在本例中它是initialcount（= 10），我添加了一个属性initialprops：{initialcount：10}。
当我测试自定义钩子的函数（在本例中为increment()）时，我使用该行为并在回调中调用increment()。
・成功
・失败
・显示动作
以上就是React 基础知识~单元测试/自定义钩子的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1494525.html
微信扫一扫 
支付宝扫一扫 
