Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dabapps/react-shallow-renderer

A shallow renderer for React components
https://github.com/dabapps/react-shallow-renderer

Last synced: 4 days ago
JSON representation

A shallow renderer for React components

Awesome Lists containing this project

README 

        
# react-shallow-renderer



**A shallow renderer for React components**



## About



This is a fork of [@jakesidsmith/react-shallow-renderer](https://github.com/jakesidsmith/react-shallow-renderer).



This is an alternative renderer to `react-test-renderer/shallow` with full support for:



* React.memo

* React.forwardRef

* React.Fragment

* React.createContext (Provider and Consumer)

* ReactDOM.createPortal

* Functional components

* Component classes



The output of this renderer is far more informative than other existing renderers, providing context of memo wrapped components, fragments, etc.



## Install



```shell

npm i @dabapps/react-shallow-renderer -S

```



## Usage



Example with jest:



```jsx

import React from 'react';

import { ReactShallowRenderer } from '@dabapps/react-shallow-renderer';

import MyComponent from './path';



describe('MyComponent', () => {

  it('renders some stuff', () => {

    const renderer = new ReactShallowRenderer();



    expect(renderer).toMatchSnapshot();

  });

});

```



Newer versions of jest will automatically call the `toJSON` method of the renderer. If the version you are using doesn't you can try:



```jsx

expect(renderer.toJSON()).toMatchSnapshot();

```



## Example output in jest snapshots



### A form component using `memo`, `Fragment`, a `SubmitButton` component that uses `memo`, and an external form library that uses `forwardRef`



```jsx

import React from 'react';

import { Field } from 'form-library';

import SubmitButton from './path';



const MyComponent = (props) => (

  <>

    


      Log in

    


    

      

      

      

        Log in

      

    

    

      Forgot password?

    

  >

);



export default React.memo(MyComponent);

```



### The output



```html



  


    Log in

  


  

    

    

    

      Log in

    

  

  

    Forgot password?

  



```



### A component using ReactDOM.createPortal, and a context consumer



```jsx

import React, { PureComponent } from 'react';

import ReactDOM from 'react-dom';

import Popover from './path';

import { MyContext } from './another-path';



export default class MyComponent extends PureComponent {

  render() {

    return ReactDOM.createPortal(

      (

        

          

            {(value) => (

              


                Some content: {value}

              


            )}

          

        

      ),

      document.getElementById('my-id')

    );

  }

}

```



### The output



```html



  

    

      [Function: Unknown]

    

  



```



You can avoid the `Unknown` function here by defining a named function, or `const` outside of the render method, which should give you a nicer output, such as:



```html



  [Function: myFunction]



```



## Tips



In order to get better snapshots (and avoid unknown component names in dev tools), you should not define anonymous / arrow functions in your render method, or immediately inside wrappers like React.memo and React.forwardRef. Instead I recommend the following:



```jsx

const MyComponent = () => 
;



export default React.memo(MyComponent);

```



Or with react-redux:



```jsx

const MyComponent = () => 
;



export default connect(mapStateToProps)(React.memo(MyComponent));

```



## Updating this fork from upstream



Ensure you have added a remote upstream in git e.g.



```shell

git remote add upstream [email protected]:JakeSidSmith/react-shallow-renderer.git

```



Create a new branch (from master) and run the following to pull changes from [upstream](https://github.com/jakesidsmith/react-shallow-renderer):



```shell

git fetch upstream

git pull upstream master

```