Skip to content

Commit c4a0dd7

Browse files
committed
update readme
1 parent ac77a55 commit c4a0dd7

File tree

2 files changed

+85
-1
lines changed

2 files changed

+85
-1
lines changed

README.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,86 @@
11
# react-native-testing-library
22

3+
Simple React Native testing utilities helping you write better tests with less effort
4+
5+
_Appreiciation notice: This project is heavily inspired by [react-testing-library](https://github.com/kentcdodds/react-testing-library). Go check it out and use it to test your web React apps._
6+
7+
## The problem
8+
9+
You want to write maintainable tests for your React Native components without testing implementation details, but then you're told to use Enzyme, which only supports shallow rendering in React Native environment. And you want to render deep! But doing so with `react-test-renderer` is so painful.
10+
11+
You would also like to use the newest React features, but you need to wait for your testing library's abstractions to catch up and it takes a while.
12+
13+
## This solution
14+
15+
The `react-native-testing-library` is a lightweight solution for testing your React Native components. It provides light utility functions on top of `react-test-renderer` letting you always be up to date with latest React features and write any component tests you like, be it shallow or deeply rendered ones. But really not any, it prevents you from testing implementation details because we stand this is a very bad practice.
16+
17+
This library is a replacement for [Enzyme](http://airbnb.io/enzyme/).
18+
19+
## Example
20+
21+
TBD
22+
23+
## Installation
24+
25+
Open a Terminal in your project's folder and run:
26+
27+
```sh
28+
yarn add --dev react-testing-library
29+
```
30+
31+
This library has a peerDependencies listing for `react-test-renderer` and, of course, `react`.
32+
33+
## Usage
34+
35+
## `render`
36+
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.
38+
39+
```jsx
40+
import { render } from 'react-native-testing-library';
41+
42+
const { ... } = render(<Component />);
43+
```
44+
45+
You'll likely want to wrap `render` with some React Context Providers, creating your custom render. [Follow this great guide on how to set this up](https://github.com/kentcdodds/react-testing-library#custom-render).
46+
47+
## `shallow`
48+
49+
Shallowly render given React copmonents. Since it (currently) doesn't return helpers to query the output, it's mostly adviced to used for snapshot testing.
50+
51+
```jsx
52+
import { shallow } from 'react-native-testing-library';
53+
54+
test('Component has a structure', () => {
55+
expect(shallow(<Component />)).toMatchSnapshot();
56+
});
57+
```
58+
59+
## `debug`
60+
61+
Log prettified shallowly rendered component or test instance (just like snapshot) to stdout.
62+
63+
```jsx
64+
import { debug } from 'react-native-testing-library';
65+
66+
debug(<Component />);
67+
// console.log:
68+
// <View>
69+
// <Text>Component</Text>
70+
// </View>
71+
```
72+
73+
## `flushMicrotasksQueue`
74+
75+
Wait for microtasks queue to flush. Useful if you want to wait for some promises with `async/await`.
76+
77+
```jsx
78+
import { flushMicrotasksQueue, render } from 'react-native-testing-library';
79+
80+
test('fetch data', async () => {
81+
const { getByText } = render(<FetchData />);
82+
getByText('fetch');
83+
await flushMicrotasksQueue();
84+
expect(getByText('fetch').props.title).toBe('loaded');
85+
});
86+
```

src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const getNodeByText = (node, text) =>
1717
: text.test(node.props.children));
1818

1919
/**
20-
* Wait for microtask queue to flush
20+
* Wait for microtasks queue to flush
2121
*/
2222
export const flushMicrotasksQueue = (): Promise<any> =>
2323
new Promise(resolve => setImmediate(resolve));

0 commit comments

Comments
 (0)