| 1 | # `react-test-renderer` (DEPRECATED) |
| 2 | |
| 3 | ## Deprecation notice |
| 4 | |
| 5 | `react-test-renderer` is deprecated and no longer maintained. It will be removed in a future version. As of React 19, you will see a console warning when invoking `ReactTestRenderer.create()`. |
| 6 | |
| 7 | ### React Testing |
| 8 | |
| 9 | This library creates a contrived environment and its APIs encourage introspection on React's internals, which may change without notice causing broken tests. It is instead recommended to use browser-based environments such as jsdom and standard DOM APIs for your assertions. |
| 10 | |
| 11 | The React team recommends [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro) as a modern alternative that uses standard APIs, avoids internals, and [promotes best practices](https://testing-library.com/docs/guiding-principles). |
| 12 | |
| 13 | ### React Native Testing |
| 14 | |
| 15 | The React team recommends @testing-library/react-native as a replacement for `react-test-renderer` for native integration tests. This React Native testing-library variant follows the same API design as described above and promotes better testing patterns. |
| 16 | |
| 17 | ## Documentation |
| 18 | |
| 19 | This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. |
| 20 | |
| 21 | Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom. |
| 22 | |
| 23 | Documentation: [https://reactjs.org/docs/test-renderer.html](https://reactjs.org/docs/test-renderer.html) |
| 24 | |
| 25 | Usage: |
| 26 | |
| 27 | ```jsx |
| 28 | const ReactTestRenderer = require('react-test-renderer'); |
| 29 | |
| 30 | const renderer = ReactTestRenderer.create( |
| 31 | <Link page="https://www.facebook.com/">Facebook</Link> |
| 32 | ); |
| 33 | |
| 34 | console.log(renderer.toJSON()); |
| 35 | // { type: 'a', |
| 36 | // props: { href: 'https://www.facebook.com/' }, |
| 37 | // children: [ 'Facebook' ] } |
| 38 | ``` |
| 39 | |
| 40 | You can also use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: https://jestjs.io/blog/2016/07/27/jest-14.html. |