随笔分类 - React
摘要:在进行 React 开发的时候,还有一个非常重要的功能模块,那就是 Hook,自定义 Hook 作为一块公共逻辑的抽离,也会像组件一样被用到多个地方,因此对 Hook 的测试也是非常有必要的。 Hook 没有办法像普通函数一样直接进行测试,因为在 React 中规中,Hook 必须要在组件里面使用,
阅读全文
摘要:在现代前端开发中,组件是一个重要的模块,一个组件拥有完整的功能,能够对我们的代码进行最大程度的复用。 因此在进行单元测试的时候,往往也需要对重要的组件进行测试。 这一节课我们先聚焦在 React 上面,看一下 React 的组件如何进行测试。 Testing library 这是专门用来做测试的一个
阅读全文
摘要:Virtual DOM Advantage: One of the advantages of the virtual DOM is cross-platform rendering abstraction. The virtual DOM can connect to different host
阅读全文
摘要:import { flushSync } from 'react-dom' import { createRoot } from 'react-dom/client' let hookIndex = 0 const states: Array<[any, (newState: any) => voi
阅读全文
摘要:Refer to https://react.dev/reference/react-dom/flushSync For example, the browser onbeforeprint API allows you to change the page immediately before t
阅读全文
摘要: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
阅读全文
摘要: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
阅读全文
摘要: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
阅读全文
摘要: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
阅读全文
摘要:Here is a component which doesn't need to use useEffect export function LocalTodos() { const [todos, setTodos] = useState([]) useEffect(() => { const
阅读全文
摘要:The component using useEffect which is not necessary: function TopicEditor({ selectedTopicId }) { const [enteredNote, setEnteredNote] = useState('');
阅读全文
摘要:The `as` Prop in React Option 1: import { Equal, Expect } from '../helpers/type-utils'; export const Wrapper = <TProps extends keyof JSX.IntrinsicElem
阅读全文
摘要:import { Router, useRouter } from "fake-external-lib"; export const withRouter = <TProps extends { router: Router }>( Component: React.ComponentType<T
阅读全文
摘要:Fix forwardRef globally To jump ahead to the solution, uncommenting the following code from Stefan Baumgartner will globally override the value of for
阅读全文
摘要:import { Equal, Expect } from "../helpers/type-utils"; type InputProps = React.ComponentProps<"input">; const COMPONENTS = { text: (props) => { return
阅读全文
摘要:1. React.ReactNode import { useState } from "react"; import { createPortal } from "react-dom"; import { Equal, Expect } from "../helpers/type-utils";
阅读全文
摘要: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
阅读全文
摘要:I want to add a common attribute to dom element globally: <> <div testId="123" /> <audio testId="123" /> <video testId="123" /> <a testId="123" /> <ab
阅读全文
摘要: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
阅读全文
摘要:interface IntrinsicElements { // HTML a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>; abbr: React.Detail
阅读全文