|
1 | 1 | # react-native-testing-library
|
2 | 2 |
|
| 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 | +``` |
0 commit comments