react-spy-on-render

Spy on React components in Jasmine tests.

DOES NOT WORK WITH FUNCTIONAL COMPONENTS. They're functions!

Installation

yarn add -D react-spy-on-render
# or
npm install react-spy-on-render --save-dev

Put this in your spec_helper.js:

import 'react-spy-on-render';
// or
require('react-spy-on-render');

Usage

spyOnRender

Just call it:

spyOnRender(Component);

By default, it won't render anything. If you want to render normally:

spyOnRender(Component).and.callThrough();

spyOnRender returns a spy, so you can do whatever you want with it.

Matchers

Was the component rendered?

expect(Component).toHaveBeenRendered();

Was the component rendered at any point with specific props?

expect(Component).toHaveBeenRenderedWithProps({
  className: 'some-class',
  otherProp: 47
});

Was the component last rendered with specific props?

expect(Component).toHaveBeenRenderedLastWithProps({
  className: 'some-class',
  otherProp: 47
});

Was the component rendered a specific number of times?

expect(Component).toHaveBeenRenderedTimes(4);

Helpers

Reset all tracked renders on a component:

resetRenders(Component);

What props were rendered last?

propsOnLastRender(Component);

What props were rendered at some other point in time?

propsOnRenderAt(Component, i);

Development

Use yarn test to start up a local Jasmine to run the tests in a browser. It watches your files for changes and automatically recompiles them with Webpack.

Use yarn build to transpile the source into the dist folder (in preparation for publishing on NPM).

Acknowledgements

This project drew a lot of inspiration and much of its code from this great project.