# @jakesidsmith/react-shallow-renderer

> A shallow renderer for React components

Latest version **1.0.0** (published 2019-03-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jakesidsmith/react-shallow-renderer
pnpm add @jakesidsmith/react-shallow-renderer
yarn add @jakesidsmith/react-shallow-renderer
bun add @jakesidsmith/react-shallow-renderer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-03-19 |
| First published | 2019-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 187 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jake 'Sid' Smith |
| Maintainers | jakesidsmith |
| Keywords | react, shallow, test, renderer, snapshot |

## Links

- npm: https://www.npmjs.com/package/@jakesidsmith/react-shallow-renderer
- Repository: https://github.com/jakesidsmith/react-shallow-renderer
- Homepage: https://github.com/jakesidsmith/react-shallow-renderer#readme
- Issues: https://github.com/jakesidsmith/react-shallow-renderer/issues
- npm.io page: https://npm.io/package/@jakesidsmith/react-shallow-renderer

## Dependencies (4)

- [react](https://npm.io/package/react.md) >=16
- [react-dom](https://npm.io/package/react-dom.md) >=16
- [@types/react](https://npm.io/package/@types/react.md) >=16
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) >=16

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-03-19
- 0.0.1 — 2019-03-16
- 0.0.0 — 2019-03-16

## README

# react-shallow-renderer

**A shallow renderer for React components**

[![CircleCI](https://circleci.com/gh/JakeSidSmith/react-shallow-renderer.svg?style=svg)](https://circleci.com/gh/JakeSidSmith/react-shallow-renderer)

## About

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.

If you're using jest you may enjoy [jest-matcher-react-shallow-snapshot](https://www.npmjs.com/package/@jakesidsmith/jest-matcher-react-shallow-snapshot), which wraps this library for ease of use:

```jsx
expect(<MyComponent />).toMatchReactShallowSnapshot()
```

## Install

```shell
npm i @jakesidsmith/react-shallow-renderer -S
```

## Usage

Example with jest:

```jsx
import React from 'react';
import { ReactShallowRenderer } from '@jakesidsmith/react-shallow-renderer';
import MyComponent from './path';

describe('MyComponent', () => {
  it('renders some stuff', () => {
    const renderer = new ReactShallowRenderer(<MyComponent />);

    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) => (
  <>
    <h1>
      Log in
    </h1>
    <form onSubmit={props.handleSubmit}>
      <Field component="input" type="email" name="email"  />
      <Field component="input" type="password" name="password"  />
      <SubmitButton>
        Log in
      </SubmitButton>
    </form>
    <a href="/forgot-password">
      Forgot password?
    </a>
  </>
);

export default React.memo(MyComponent);
```

### The output

```html
<React.Fragment>
  <h1>
    Log in
  </h1>
  <form
    onSubmit={[Function]}
  >
    <React.forwardRef(Field)
      component="input"
      type="email"
      name="email"
    />
    <React.forwardRef(Field)
      component="input"
      type="password"
      name="password"
    />
    <React.memo(SubmitButton)>
      Log in
    </React.memo(SubmitButton)>
  </form>
  <a
    href="/forgot-password"
  >
    Forgot password?
  </a>
</React.Fragment>
```

### 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(
      (
        <Popover>
          <MyContext.Consumer>
            {(value) => (
              <p>
                Some content: {value}
              </p>
            )}
          </MyContext.Consumer>
        </Popover>
      ),
      document.getElementById('my-id')
    );
  }
}
```

### The output

```html
<ReactDOM.Portal>
  <Popover>
    <React.Consumer>
      [Function: Unknown]
    </React.Consumer>
  </Popover>
</ReactDOM.Portal>
```

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
<React.Consumer>
  [Function: myFunction]
</React.Consumer>
```

## 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 = () => <div />;

export default React.memo(MyComponent);
```

Or with react-redux:

```jsx
const MyComponent = () => <div />;

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

---
_Source: https://npm.io/package/@jakesidsmith/react-shallow-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._