随笔分类 -  React

1 2 3 4 5 ··· 23 下一页
摘要:在进行 React 开发的时候,还有一个非常重要的功能模块,那就是 Hook,自定义 Hook 作为一块公共逻辑的抽离,也会像组件一样被用到多个地方,因此对 Hook 的测试也是非常有必要的。 Hook 没有办法像普通函数一样直接进行测试,因为在 React 中规中,Hook 必须要在组件里面使用, 阅读全文
posted @ 2025-01-29 17:33 Zhentiw 阅读(9) 评论(0) 推荐(0) 编辑
摘要:在现代前端开发中,组件是一个重要的模块,一个组件拥有完整的功能,能够对我们的代码进行最大程度的复用。 因此在进行单元测试的时候,往往也需要对重要的组件进行测试。 这一节课我们先聚焦在 React 上面,看一下 React 的组件如何进行测试。 Testing library 这是专门用来做测试的一个 阅读全文
posted @ 2025-01-28 12:46 Zhentiw 阅读(25) 评论(0) 推荐(0) 编辑
摘要:Virtual DOM Advantage: One of the advantages of the virtual DOM is cross-platform rendering abstraction. The virtual DOM can connect to different host 阅读全文
posted @ 2024-11-26 21:03 Zhentiw 阅读(3) 评论(0) 推荐(0) 编辑
摘要:import { flushSync } from 'react-dom' import { createRoot } from 'react-dom/client' let hookIndex = 0 const states: Array<[any, (newState: any) => voi 阅读全文
posted @ 2024-07-31 14:37 Zhentiw 阅读(4) 评论(0) 推荐(0) 编辑
摘要:Refer to https://react.dev/reference/react-dom/flushSync For example, the browser onbeforeprint API allows you to change the page immediately before t 阅读全文
posted @ 2024-07-31 14:25 Zhentiw 阅读(9) 评论(0) 推荐(0) 编辑
摘要:Sometimes, you might need to wait for an element to disappear from your UI before proceeding with your test setup or making your assertion. In this le 阅读全文
posted @ 2024-05-07 15:05 Zhentiw 阅读(8) 评论(0) 推荐(0) 编辑
摘要:Querying is difficult! Even if we follow the guiding principles and always start from the queries accessible to everyone, we are bound to get stuck so 阅读全文
posted @ 2024-05-07 14:52 Zhentiw 阅读(3) 评论(0) 推荐(0) 编辑
摘要:Given how web pages are built nowadays, you might find yourself with multiple instances of the same element. To avoid querying for a list of elements 阅读全文
posted @ 2024-05-07 14:48 Zhentiw 阅读(2) 评论(0) 推荐(0) 编辑
摘要:Sync api: getBy* queryBy* Async api: findBy* For sync api, when to use which? queryBy*: when the element is not always shown on screen getBy*: when th 阅读全文
posted @ 2024-05-07 14:32 Zhentiw 阅读(3) 评论(0) 推荐(0) 编辑
摘要:Here is a component which doesn't need to use useEffect export function LocalTodos() { const [todos, setTodos] = useState([]) useEffect(() => { const 阅读全文
posted @ 2024-04-08 14:54 Zhentiw 阅读(2) 评论(0) 推荐(0) 编辑
摘要:The component using useEffect which is not necessary: function TopicEditor({ selectedTopicId }) { const [enteredNote, setEnteredNote] = useState(''); 阅读全文
posted @ 2024-04-08 14:49 Zhentiw 阅读(1) 评论(0) 推荐(0) 编辑
摘要:The `as` Prop in React Option 1: import { Equal, Expect } from '../helpers/type-utils'; export const Wrapper = <TProps extends keyof JSX.IntrinsicElem 阅读全文
posted @ 2023-08-31 19:53 Zhentiw 阅读(24) 评论(0) 推荐(0) 编辑
摘要:import { Router, useRouter } from "fake-external-lib"; export const withRouter = <TProps extends { router: Router }>( Component: React.ComponentType<T 阅读全文
posted @ 2023-08-30 15:07 Zhentiw 阅读(11) 评论(0) 推荐(0) 编辑
摘要:Fix forwardRef globally To jump ahead to the solution, uncommenting the following code from Stefan Baumgartner will globally override the value of for 阅读全文
posted @ 2023-08-29 14:41 Zhentiw 阅读(13) 评论(0) 推荐(0) 编辑
摘要:import { Equal, Expect } from "../helpers/type-utils"; type InputProps = React.ComponentProps<"input">; const COMPONENTS = { text: (props) => { return 阅读全文
posted @ 2023-08-29 14:34 Zhentiw 阅读(11) 评论(0) 推荐(0) 编辑
摘要:1. React.ReactNode import { useState } from "react"; import { createPortal } from "react-dom"; import { Equal, Expect } from "../helpers/type-utils"; 阅读全文
posted @ 2023-08-28 20:37 Zhentiw 阅读(8) 评论(0) 推荐(0) 编辑
摘要:Navigating to the type definition for lazy by CMD + click in local VS Code, or in the DefinitelyTyped repo. We can see the following definition: funct 阅读全文
posted @ 2023-08-28 17:54 Zhentiw 阅读(57) 评论(0) 推荐(0) 编辑
摘要:I want to add a common attribute to dom element globally: <> <div testId="123" /> <audio testId="123" /> <video testId="123" /> <a testId="123" /> <ab 阅读全文
posted @ 2023-08-24 14:52 Zhentiw 阅读(7) 评论(0) 推荐(0) 编辑
摘要:The ElementTypetype helper is a bit unusal because it accepts some props and derives what types of components would be able to recieve those props. He 阅读全文
posted @ 2023-08-23 14:05 Zhentiw 阅读(168) 评论(0) 推荐(0) 编辑
摘要:interface IntrinsicElements { // HTML a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>; abbr: React.Detail 阅读全文
posted @ 2023-08-23 13:53 Zhentiw 阅读(150) 评论(1) 推荐(0) 编辑

1 2 3 4 5 ··· 23 下一页
点击右上角即可分享
微信分享提示