Skip to content

Commit 5a16e8a

Browse files
committed
update readme with new render API and example
1 parent e6ac5ad commit 5a16e8a

File tree

1 file changed

+88
-4
lines changed

1 file changed

+88
-4
lines changed

README.md

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,28 @@ This library is a replacement for [Enzyme](http://airbnb.io/enzyme/).
1818

1919
## Example
2020

21-
TBD
21+
```jsx
22+
import { render } from 'react-native-testing-library';
23+
import { QuestionsBoard } from '../QuestionsBoard';
24+
25+
function setAnswer(getAllByName, index, answer) {
26+
getAllByName('Question')[index].props.onChangeText(answer);
27+
}
28+
29+
test('should verify two questions', () => {
30+
const { getAllByName, getByText } = render(<QuestionsBoard {...props} />);
31+
32+
setAnswer(getAllByName, 0, 'a1');
33+
setAnswer(getAllByName, 1, 'a2');
34+
35+
getByText('submit').props.onPress();
36+
37+
expect(props.verifyQuestions).toBeCalledWith({
38+
'1': { q: 'q1', a: 'a1' },
39+
'2': { q: 'q2', a: 'a2' },
40+
});
41+
});
42+
```
2243

2344
## Installation
2445

@@ -28,20 +49,83 @@ Open a Terminal in your project's folder and run:
2849
yarn add --dev react-testing-library
2950
```
3051

31-
This library has a peerDependencies listing for `react-test-renderer` and, of course, `react`.
52+
This library has a peerDependencies listing for `react-test-renderer` and, of course, `react`. Make sure to install them too!
53+
54+
As you may have noticed, it's not tied to React Native at all – you can safely use it in your React components if you feel like not interacting directly with DOM.
3255

3356
## Usage
3457

3558
## `render`
3659

37-
Deeply render given React component and returns helpers to query the output. For convenience it also returns `react-test-renderer`'s `instance` and `renderer` objects, in case you need more control.
60+
Defined as:
61+
62+
```jsx
63+
function render(
64+
component: React.Element<*>,
65+
options?: {
66+
/* You won't often use this, but it's helpful when testing refs */
67+
createNodeMock: (element: React.Element<*>) => any,
68+
}
69+
): RenderResult {}
70+
```
71+
72+
Deeply render given React element and returns helpers to query the output. For convenience it also returns `react-test-renderer`'s `instance` and `renderer` objects, in case you need more control.
3873

3974
```jsx
4075
import { render } from 'react-native-testing-library';
4176

42-
const { getByTestId, instance /*...*/ } = render(<Component />);
77+
const { getByTestId, getByName /*...*/ } = render(<Component />);
4378
```
4479

80+
Returns a `RenderResult` object with following properties:
81+
82+
### `getByTestId: (testID: string)`
83+
84+
A method returning a `ReactTestInstance` with matching `testID` prop. Throws when no matches.
85+
86+
_Note: most methods like this one return a [`ReactTestInstance`](https://reactjs.org/docs/test-renderer.html#testinstance) with following properties that you may be interested in:_
87+
88+
```jsx
89+
type ReactTestInstance = {
90+
type: string | Function,
91+
props: { [propName: string]: any },
92+
parent: null | ReactTestInstance,
93+
children: Array<ReactTestInstance | string>,
94+
};
95+
```
96+
97+
### `getByName: (name: string | React.Element<*>)`
98+
99+
A method returning a `ReactTestInstance` with matching name – may be a string or React Element. Throws when no matches.
100+
101+
### `getAllByName: (name: string | React.Element<*>)`
102+
103+
A method returning an array of `ReactTestInstance`s with matching name – may be a string or React Element.
104+
105+
### `getByText: (text: string | RegExp)`
106+
107+
A method returning a `ReactTestInstance` with matching text – may be a string or regular expression. Throws when no matches.
108+
109+
### `getAllByText: (text: string | RegExp)`
110+
111+
A method returning an array of `ReactTestInstance`s with matching text – may be a string or regular expression.
112+
113+
### `getByProps: (props: { [propName: string]: any })`
114+
115+
A method returning a `ReactTestInstance` with matching props object. Throws when no matches.
116+
117+
### `getAllByProps: (props: { [propName: string]: any })`
118+
119+
A method returning an array of `ReactTestInstance`s with matching props object.
120+
121+
### `update: (element: React.Element<*>) => void`
122+
123+
Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.
124+
125+
### `unmount: () => void`
126+
127+
Unmount the in-memory tree, triggering the appropriate lifecycle events
128+
45129
When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases it's convenient to create your custom `render` method. [Follow this great guide on how to set this up](https://github.com/kentcdodds/react-testing-library#custom-render).
46130

47131
## `shallow`

0 commit comments

Comments
 (0)