Installation

With npm

npm i -D jest-react-mock

or with yarn

yarn add -D jest-react-mock

Setup

In your test setup:

import 'jest-react-mock';

Usage

toBeMounted

Checks that a mock component is currently mounted.

import createReactMock from 'react-mock-component';
import React from 'react';
import {render, unmount} from 'react-dom';

const Mock = createReactMock();

expect(Mock).not.toBeMounted();
render(<Mock />);
expect(Mock).toBeMounted();
unmount();
expect(Mock).not.toBeMounted();

toHaveBeenRendered()

Checks that a mock component has been rendered at least once.

import createReactMock from 'react-mock-component';
import React from 'react';
import {render} from 'react-dom';

const Mock = createReactMock();

expect(Mock).not.toHaveBeenRendered();

render(<Mock />);

expect(Mock).toHaveBeenRendered();

This is slightly different from toBeMounted: if the component gets unmounted toBeMounted will throw whereas toHaveBeenRendered will continue to pass.

toHaveBeenRenderedWith(props)

Checks that a mock component has been rendered with the expected props at least once. If you want to check only the last render then use toHaveProps. You can pass a subset of the props and they will be deeply matched against the received ones.

import createReactMock from 'react-mock-component';
import React from 'react';
import {render} from 'react-dom';

const Mock = createReactMock<{ foo: string, bar: number }>();

render(<Mock foo="bar" bar={42} />);

expect(Mock).toHaveBeenRenderedWith({ foo: 'bar' });

toHaveProps(props)

Checks that a mock component's last received props match the expected ones. If you want the check all renders and not just the last one then use toHaveBeenRenderedWith. You can pass a subset of the props and they will be deeply matched against the received ones.

import createReactMock from 'react-mock-component';
import React from 'react';
import {render} from 'react-dom';

const Mock = createReactMock<{ foo: string, bar: number }>();

render(<Mock foo="bar" bar={42} />);

expect(Mock).toHaveProps({ foo: 'bar' });