chore(docs): improve examples to use better APIs

This commit is contained in:
Michał Pierzchała
2019-06-11 13:32:26 +02:00
parent 8778012ed8
commit fb8a6fc7e2
3 changed files with 17 additions and 8 deletions
+2 -2
View File
@@ -44,8 +44,8 @@ function setAnswer(question, answer) {
}
test('should verify two questions', () => {
const { getAllByType, getByText } = render(<QuestionsBoard {...props} />);
const allQuestions = getAllByType(Question);
const { getAllByA11yRole, getByText } = render(<QuestionsBoard {...props} />);
const allQuestions = getAllByA11yRole('header');
setAnswer(allQuestions[0], 'a1');
setAnswer(allQuestions[1], 'a2');
+12 -4
View File
@@ -27,10 +27,18 @@ Deeply renders given React element and returns helpers to query the output compo
```jsx
import { render } from 'react-native-testing-library';
import { QuestionsBoard } from '../QuestionsBoard';
const { getByTestId, getByText /*...*/ } = render(<Component />);
test('should verify two questions', () => {
const { queryAllByA11yRole } = render(<QuestionsBoard {...props} />);
const allQuestions = queryAllByA11yRole('header');
expect(allQuestions).toHaveLength(2);
});
```
> 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://testing-library.com/docs/react-testing-library/setup#custom-render).
The `render` method returns a `RenderResult` object that has a few properties:
### `...queries`
@@ -42,7 +50,9 @@ See [Queries](./Queries.md) for a complete list.
#### Example
```jsx
const { getByText, queryByA11yRole } = render(<Component />);
import { render } from 'react-native-testing-library';
const { getByText, queryByA11yStates } = render(<Component />);
```
### `update`
@@ -66,8 +76,6 @@ unmount(): void
Unmount the in-memory tree, triggering the appropriate lifecycle events
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).
### `debug`
```ts
+3 -2
View File
@@ -29,8 +29,9 @@ function setAnswer(question, answer) {
}
test('should verify two questions', () => {
const { getAllByType, getByText } = render(<QuestionsBoard {...props} />);
const allQuestions = getAllByType(Question);
jest.spyOn(props, 'verifyQuestions');
const { getAllByA11yRole, getByText } = render(<QuestionsBoard {...props} />);
const allQuestions = getAllByA11yRole('header');
setAnswer(allQuestions[0], 'a1');
setAnswer(allQuestions[1], 'a2');