From 3e2704b7f6ea01db667a8640bc8b604218e36ed8 Mon Sep 17 00:00:00 2001 From: Michael Peyper Date: Wed, 27 Apr 2022 20:25:39 +1000 Subject: [PATCH 1/2] docs(renderHook): remove references to error and all from renderHook API --- website/docs/API.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/website/docs/API.md b/website/docs/API.md index 097a109f7..568540f6f 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -400,7 +400,7 @@ test('waiting for an Banana to be removed', async () => { }); ``` -This method expects that the element is initally present in the render tree and then is removed from it. If the element is not present when you call this method it throws an error. +This method expects that the element is initially present in the render tree and then is removed from it. If the element is not present when you call this method it throws an error. You can use any of `getBy`, `getAllBy`, `queryBy` and `queryAllBy` queries for `expectation` parameter. @@ -533,13 +533,11 @@ The `renderHook` function returns an object that has the following properties: ```jsx { - all: Array - current: any, - error: Error + current: any } ``` -The `current` value of the `result` will reflect the latest of whatever is returned from the `callback` passed to `renderHook`. Any thrown values from the latest call will be reflected in the `error` value of the `result`. The `all` value is an array containing all the returns (including the most recent) from the callback. These could be `result` or an `error` depending on what the callback returned at the time. +The `current` value of the `result` will reflect the latest of whatever is returned from the `callback` passed to `renderHook`. #### `rerender` @@ -592,7 +590,7 @@ it('should increment count', () => { #### With `wrapper` ```jsx -it('should work properly', () => { +it('should use context value', () => { function Wrapper({ children }: { children: ReactNode }) { return {children}; } From cc2f3c5267a61597e98920c7d0edb27af0dbd6cd Mon Sep 17 00:00:00 2001 From: Michael Peyper Date: Mon, 2 May 2022 09:14:17 +1000 Subject: [PATCH 2/2] docs(renderHook): update code snippets to use TS --- website/docs/API.md | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/website/docs/API.md b/website/docs/API.md index 568540f6f..63a394914 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -471,10 +471,10 @@ Useful function to help testing components that use hooks API. By default any `r Defined as: ```ts -function renderHook( - callback: (props?: any) => any, - options?: RenderHookOptions -): RenderHookResult; +function renderHook( + callback: (props?: Props) => Result, + options?: RenderHookOptions +): RenderHookResult; ``` Renders a test component that will call the provided `callback`, including any hooks it calls, every time it renders. Returns [`RenderHookResult`](#renderhookresult-object) object, which you can interact with. @@ -515,17 +515,17 @@ The `props` passed into the callback will be the `initialProps` provided in the ### `options` (Optional) -A `RenderHookOptions` object to modify the execution of the `callback` function, containing the following properties: +A `RenderHookOptions` object to modify the execution of the `callback` function, containing the following properties: #### `initialProps` -The initial values to pass as `props` to the `callback` function of `renderHook`. +The initial values to pass as `props` to the `callback` function of `renderHook`. The `Props` type is determined by the type passed to or inferred by the `renderHook` call. #### `wrapper` -A React component to wrap the test component in when rendering. This is usually used to add context providers from `React.createContext` for the hook to access with `useContext`. `initialProps` and props subsequently set by `rerender` will be provided to the wrapper. +A React component to wrap the test component in when rendering. This is usually used to add context providers from `React.createContext` for the hook to access with `useContext`. -### `RenderHookResult` object +### `RenderHookResult` object The `renderHook` function returns an object that has the following properties: @@ -533,21 +533,25 @@ The `renderHook` function returns an object that has the following properties: ```jsx { - current: any + current: Result } ``` -The `current` value of the `result` will reflect the latest of whatever is returned from the `callback` passed to `renderHook`. +The `current` value of the `result` will reflect the latest of whatever is returned from the `callback` passed to `renderHook`. The `Result` type is determined by the type passed to or inferred by the `renderHook` call. #### `rerender` -function rerender(newProps?: any): void +```ts +function rerender(newProps?: Props): void; +``` -A function to rerender the test component, causing any hooks to be recalculated. If `newProps` are passed, they will replace the `callback` function's `initialProps` for subsequent rerenders. +A function to rerender the test component, causing any hooks to be recalculated. If `newProps` are passed, they will replace the `callback` function's `initialProps` for subsequent rerenders. The `Props` type is determined by the type passed to or inferred by the `renderHook` call. #### `unmount` -function unmount(): void +```ts +function unmount(): void; +``` A function to unmount the test component. This is commonly used to trigger cleanup effects for `useEffect` hooks. @@ -557,7 +561,7 @@ Here we present some extra examples of using `renderHook` API. #### With `initialProps` -```jsx +```ts const useCount = (initialCount: number) => { const [count, setCount] = useState(initialCount); const increment = () => setCount((previousCount) => previousCount + 1); @@ -589,7 +593,7 @@ it('should increment count', () => { #### With `wrapper` -```jsx +```tsx it('should use context value', () => { function Wrapper({ children }: { children: ReactNode }) { return {children};