From cd2167ca9ac920eb6411b2d00b2bfffcdc9e2d24 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Thu, 19 May 2022 22:29:27 +0200 Subject: [PATCH 1/2] docs: add toc for APIs --- website/docs/API.md | 76 ++++++++++++++++++++++++++++++++------------- 1 file changed, 55 insertions(+), 21 deletions(-) diff --git a/website/docs/API.md b/website/docs/API.md index 63a394914..cbaf87f1a 100644 --- a/website/docs/API.md +++ b/website/docs/API.md @@ -3,6 +3,34 @@ id: api title: API --- +### Table of contents: + +- [`render`](#render) + - [`update`](#update) + - [`unmount`](#unmount) + - [`debug`](#debug) + - [`toJSON`](#tojson) + - [`container`](#container) +- [`cleanup`](#cleanup) +- [`fireEvent`](#fireevent) +- [`fireEvent[eventName]`](#fireeventeventname) + - [`fireEvent.press`](#fireeventpress) + - [`fireEvent.changeText`](#fireeventchangetext) + - [`fireEvent.scroll`](#fireeventscroll) +- [`waitFor`](#waitfor) +- [`waitForElementToBeRemoved`](#waitforelementtoberemoved) +- [`within, getQueriesForElement`](#within-getqueriesforelement) +- [`query` APIs](#query-apis) +- [`queryAll` APIs](#queryall-apis) +- [`act`](#act) +- [`renderHook`](#renderhook) + - [`callback`](#callback) + - [`options`](#options-optional) + - [`RenderHookResult` object](#renderhookresult-object) + - [`result`](#result) + - [`rerender`](#rerender) + - [`unmount`](#unmount-1) + This page gathers public API of React Native Testing Library along with usage examples. ## `render` @@ -225,7 +253,11 @@ fireEvent[eventName](element: ReactTestInstance, ...data: Array): void Convenience methods for common events like: `press`, `changeText`, `scroll`. -### `fireEvent.press: (element: ReactTestInstance, ...data: Array) => void` +### `fireEvent.press` + +``` +fireEvent.press: (element: ReactTestInstance, ...data: Array) => void +``` Invokes `press` event handler on the element or parent element in the tree. @@ -253,7 +285,11 @@ fireEvent.press(getByText('Press me'), eventData); expect(onPressMock).toHaveBeenCalledWith(eventData); ``` -### `fireEvent.changeText: (element: ReactTestInstance, ...data: Array) => void` +### `fireEvent.changeText` + +``` +fireEvent.changeText: (element: ReactTestInstance, ...data: Array) => void +``` Invokes `changeText` event handler on the element or parent element in the tree. @@ -273,7 +309,11 @@ const { getByPlaceholderText } = render( fireEvent.changeText(getByPlaceholderText('Enter data'), CHANGE_TEXT); ``` -### `fireEvent.scroll: (element: ReactTestInstance, ...data: Array) => void` +### `fireEvent.scroll` + +``` +fireEvent.scroll: (element: ReactTestInstance, ...data: Array) => void +``` Invokes `scroll` event handler on the element or parent element in the tree. @@ -519,40 +559,34 @@ A `RenderHookOptions` object to modify the execution of the `callback` fu #### `initialProps` -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. +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`. -### `RenderHookResult` object +### `RenderHookResult` object + +```ts +interface RenderHookResult { + result: { current: Result }; + rerender: (props: Props) => void; + unmount: () => void; +} +``` The `renderHook` function returns an object that has the following properties: #### `result` -```jsx -{ - current: Result -} -``` - -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. +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` -```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. The `Props` type is determined by the type passed to or inferred by the `renderHook` call. +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` -```ts -function unmount(): void; -``` - A function to unmount the test component. This is commonly used to trigger cleanup effects for `useEffect` hooks. ### Examples From 0c90f542813739ca64154e2a0d83f84d6d8dd69c Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Thu, 19 May 2022 22:40:28 +0200 Subject: [PATCH 2/2] docs: add toc for Queries --- website/docs/Queries.md | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/website/docs/Queries.md b/website/docs/Queries.md index 85fa0d881..c848e3de8 100644 --- a/website/docs/Queries.md +++ b/website/docs/Queries.md @@ -3,6 +3,33 @@ id: api-queries title: Queries --- +### Table of contents: + +- [Variants](#variants) + - [`getBy`](#getby) + - [`getAllBy`](#getallby) + - [`queryBy`](#queryby) + - [`queryAllBy`](#queryallby) + - [`findBy`](#findby) + - [`findAllBy`](#findallby) +- [Queries](#queries) + - [`options`](#options) + - [`ByText`](#bytext) + - [`ByPlaceholderText`](#byplaceholdertext) + - [`ByDisplayValue`](#bydisplayvalue) + - [`ByTestId`](#bytestid) + - [`ByLabelText`](#bylabeltext) + - [`ByHintText`, `ByA11yHint`, `ByAccessibilityHint`](#byhinttext-bya11yhint-byaccessibilityhint) + - [`ByA11yStates`, `ByAccessibilityStates`](#bya11ystates-byaccessibilitystates) + - [`ByRole`](#byrole) + - [`ByA11yState`, `ByAccessibilityState`](#bya11ystate-byaccessibilitystate) + - [`ByA11Value`, `ByAccessibilityValue`](#bya11value-byaccessibilityvalue) +- [`TextMatch`](#textmatch) + - [Examples](#examples) + - [Precision](#precision) + - [Normalization](#normalization) +- [Unit testing helpers](#unit-testing-helpers) + ## Variants > `getBy` queries are shown by default in the [query documentation](#queries) @@ -55,7 +82,7 @@ type ReactTestInstance = { ### Options -Query first argument can be a **string** or a **regex**. Some queries accept optional argument which change string matching behaviour. See [TextMatch](#textmatch) for more info. +Usually query first argument can be a **string** or a **regex**. Some queries accept optional argument which change string matching behaviour. See [TextMatch](#textmatch) for more info. ### `ByText` @@ -128,7 +155,7 @@ const { getByLabelText } = render(); const element = getByLabelText('my-label'); ``` -### `ByA11yHint`, `ByAccessibilityHint`, `ByHintText` +### `ByHintText`, `ByA11yHint`, `ByAccessibilityHint` > getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint > getByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint