You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -79,7 +43,7 @@ Latest `render` result is kept in [`screen`](#screen) variable that can be impor
79
43
Using `screen` instead of destructuring `render` result is recommended approach. See [this article](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen) from Kent C. Dodds for more details.
80
44
:::
81
45
82
-
### `render`options
46
+
### Options {#render-options}
83
47
84
48
The behavior of `render` method can be customized by passing various options as a second argument of `RenderOptions` type:
85
49
@@ -257,7 +221,7 @@ This API typically will return a composite view which goes against recommended t
257
221
This API has been previously named `container` for compatibility with [React Testing Library](https://testing-library.com/docs/react-testing-library/api#container-1). However, despite the same name, the actual behavior has been signficantly different, hence the name change to `UNSAFE_root`.
258
222
:::
259
223
260
-
## `screen`
224
+
## `screen` API
261
225
262
226
```ts
263
227
let screen:RenderResult;
@@ -274,48 +238,7 @@ This can also be used to build test utils that would normally require to be in r
Unmounts React trees that were mounted with `render` and clears `screen` variable that holds latest `render` output.
284
-
285
-
:::info
286
-
Please note that this is done automatically if the testing framework you're using supports the `afterEach` global (like mocha, Jest, and Jasmine). If not, you will need to do manual cleanups after each test.
287
-
:::
288
-
289
-
For example, if you're using the `jest` testing framework, then you would need to use the `afterEach` hook like so:
The `afterEach(cleanup)` call also works in `describe` blocks:
304
-
305
-
```jsx
306
-
describe('when logged in', () => {
307
-
afterEach(cleanup);
308
-
309
-
it('renders the user', () => {
310
-
render(<SiteHeader />);
311
-
// ...
312
-
});
313
-
});
314
-
```
315
-
316
-
Failing to call `cleanup` when you've called `render` could result in a memory leak and tests which are not "idempotent" (which can lead to difficult to debug errors in your tests).
If you're noticing that components are not being found on a list, even after mocking a scroll event, try changing the [`initialNumToRender`](https://reactnative.dev/docs/flatlist#initialnumtorender) that you have set. If you aren't comfortable changing the code to accept this prop from the unit test, try using an e2e test that might better suit what use case you're attempting to replicate.
@@ -573,7 +492,7 @@ Avoiding side effects in `expectation` callback can be partially enforced with t
573
492
574
493
It is also recommended to have a [single assertion per each `waitFor`](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback) for more consistency and faster failing tests. If you want to make several assertions, then they should be in seperate `waitFor` calls. In many cases you won't actually need to wrap the second assertion in `waitFor` since the first one will do the waiting required for asynchronous change to happen.
575
494
576
-
### Using a React Native version < 0.71 with Jest fake timers
495
+
####Using a React Native version < 0.71 with Jest fake timers
577
496
578
497
:::caution
579
498
When using a version of React Native < 0.71 and modern fake timers (the default for `Jest` >= 27), `waitFor` won't work (it will always timeout even if `expectation()` doesn't throw) unless you use the custom [@testing-library/react-native preset](https://github.com/callstack/react-native-testing-library#custom-jest-preset).
@@ -624,7 +543,7 @@ In order to properly use `waitFor` you need at least React >=16.9.0 (featuring a
624
543
If you receive warnings related to `act()` function consult our [Undestanding Act](./UnderstandingAct.md) function document.
@@ -696,37 +615,55 @@ Use cases for scoped queries include:
696
615
- queries scoped to a single item inside a FlatList containing many items
697
616
- queries scoped to a single screen in tests involving screen transitions (e.g. with react-navigation)
698
617
699
-
## `queryBy*` APIs
700
618
701
-
Each of the `getBy*` APIs listed in the render section above have a complimentary `queryBy*` API. The `getBy*` APIs will throw errors if a proper node cannot be found. This is normally the desired effect. However, if you want to make an assertion that an element is not present in the hierarchy, then you can use the `queryBy*` API instead:
Useful function to help testing components that use hooks API. By default any `render`, `update`, `fireEvent`, and `waitFor` calls are wrapped by this function, so there is no need to wrap it manually. This method is re-exported from [`react-test-renderer`](https://github.com/facebook/react/blob/main/packages/react-test-renderer/src/ReactTestRenderer.js#L567]).
705
622
706
-
render(<Form />);
707
-
constsubmitButton=screen.queryByText('submit');
708
-
expect(submitButton).not.toBeOnTheScreen(); // it doesn't exist
623
+
Consult our [Undestanding Act function](./UnderstandingAct.md) document for more understanding of its intricacies.
624
+
625
+
### `cleanup`
626
+
627
+
```ts
628
+
const cleanup: () =>void;
709
629
```
710
630
711
-
## `queryAll*` APIs
631
+
Unmounts React trees that were mounted with `render` and clears `screen` variable that holds latest `render` output.
632
+
633
+
:::info
634
+
Please note that this is done automatically if the testing framework you're using supports the `afterEach` global (like mocha, Jest, and Jasmine). If not, you will need to do manual cleanups after each test.
635
+
:::
712
636
713
-
Each of the query APIs have a corresponding `queryAll*` version that always returns an array of matching nodes. `getAll*` is the same but throws when the array has a length of 0.
637
+
For example, if you're using the `jest` testing framework, then you would need to use the `afterEach` hook like so:
expect(submitButtons).toHaveLength(3); // expect 3 elements
645
+
it('renders a view', () => {
646
+
render(<View />);
647
+
// ...
648
+
});
721
649
```
722
650
723
-
## `act`
651
+
The `afterEach(cleanup)` call also works in `describe` blocks:
724
652
725
-
Useful function to help testing components that use hooks API. By default any `render`, `update`, `fireEvent`, and `waitFor` calls are wrapped by this function, so there is no need to wrap it manually. This method is re-exported from [`react-test-renderer`](https://github.com/facebook/react/blob/main/packages/react-test-renderer/src/ReactTestRenderer.js#L567]).
653
+
```jsx
654
+
describe('when logged in', () => {
655
+
afterEach(cleanup);
726
656
727
-
Consult our [Undestanding Act function](./UnderstandingAct.md) document for more understanding of its intricacies.
657
+
it('renders the user', () => {
658
+
render(<SiteHeader />);
659
+
// ...
660
+
});
661
+
});
662
+
```
663
+
664
+
Failing to call `cleanup` when you've called `render` could result in a memory leak and tests which are not "idempotent" (which can lead to difficult to debug errors in your tests).
The `renderHook` function accepts the following arguments:
769
706
770
-
### `callback`
771
-
772
-
The function that is called each `render` of the test component. This function should call one or more hooks for testing.
707
+
Callback is a function that is called each `render` of the test component. This function should call one or more hooks for testing.
773
708
774
709
The `props` passed into the callback will be the `initialProps` provided in the `options` to `renderHook`, unless new props are provided by a subsequent `rerender` call.
775
710
776
-
### `options` (Optional)
711
+
### `options`
777
712
778
713
A `RenderHookOptions<Props>` object to modify the execution of the `callback` function, containing the following properties:
779
714
@@ -785,7 +720,7 @@ The initial values to pass as `props` to the `callback` function of `renderHook`
785
720
786
721
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`.
The `renderHook` function returns an object that has the following properties:
799
734
800
-
####`result`
735
+
### `result`
801
736
802
737
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.
803
738
804
-
####`rerender`
739
+
### `rerender`
805
740
806
741
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.
807
742
808
-
####`unmount`
743
+
### `unmount`
809
744
810
745
A function to unmount the test component. This is commonly used to trigger cleanup effects for `useEffect` hooks.
Copy file name to clipboardExpand all lines: website/docs/GettingStarted.md
-1Lines changed: 0 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,6 @@
2
2
id: getting-started
3
3
title: Getting Started
4
4
---
5
-
6
5
## The problem
7
6
8
7
You want to write maintainable tests for your React Native components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.
Copy file name to clipboardExpand all lines: website/docs/MigrationV11.md
+8-5Lines changed: 8 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -2,16 +2,19 @@
2
2
id: migration-v11
3
3
title: Migration to 11.0
4
4
---
5
+
import TOCInline from '@theme/TOCInline';
5
6
6
7
Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes.
7
8
9
+
<TOCInlinetoc={toc} />
10
+
8
11
# Breaking changes
9
12
10
-
## Update to Jest 28 if you use fake timers
13
+
###Update to Jest 28 if you use fake timers
11
14
12
15
If you use fake timers in any of your tests you should update your Jest dependencies to version 28. This is due to the fact that [`jest.useFakeTimers()` config structure](https://jestjs.io/docs/jest-object#jestusefaketimersfaketimersconfig) has changed.
13
16
14
-
## Refactor legacy `waitForOptions` position
17
+
###Refactor legacy `waitForOptions` position
15
18
16
19
In version 9 we introducted query `options` parameters for each query type. This affected all `findBy` and `findAllBy` queries because their signatures changed e.g. from:
0 commit comments