ssr

sinon-spy-react

Spy on React.js classes with Sinon

Showing:

Popularity

Downloads/wk

180

GitHub Stars

8

Maintenance

Last Commit

5yrs ago

Contributors

6

Package

Dependencies

0

Size (min+gzip)

0.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
Please use classes instead of React.createClass(). More information: https://github.com/levrik/sinon-spy-react#deprecated

Readme

sinon-spy-react npm package

Spy on React.js classes with Sinon

DEPRECATED

Please use classes instead of the React.createClass API since it's deprecated. Spying and stubbing of class methods is possible without this library.

How do I migrate my tests after conversion to classes?

// Before
const spy = spyOnComponentMethod(Component, 'componentDidMount');

// After
const spy = sinon.spy(Component.prototype, 'componentDidMount');
// Before
const stub = stubComponentMethod(Component, 'getInitialState').returns({
  foo: 'bar'
});

// After
const stub = sinon.stub(Component.prototype, 'getInitialState').returns({
  foo: 'bar'
});

Installation

npm install sinon-spy-react --save-dev

For the old 1.x documentation, look here.

API

spyOnComponentMethod(reactClass, methodName)

This method creates and returns a spy on the given React component class and method. The original function is wrapped into the spy. That means the original code will still be executed. To prevent this or execute custom code use a stub.

Note: It isn't possible to create a spy on a method which does not exist except for lifecycle methods (e.g. componentDidMount). getDefaultProps and getChildContext are not supported. For getInitialState use a stub. That can be used to return a custom initial state for the test scenario, for example.

stubComponentMethod(reactClass, methodName)

This method stubs the method on the given React component class and returns the stub.

Note: The restore method of the stub only restores the function on the React class definition, not on the instance. Create a new instance of the component after calling restore to get an instance with the restored method.

Examples

import assert from 'assert'; // obviously you can use a assertion library of your choice
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import { spyOnComponentMethod, stubComponentMethod } from 'sinon-spy-react';

import Component from './Component'; // some React component to test

it('calls componentDidMount after mounting', () => {
    const spy = spyOnComponentMethod(Component, 'componentDidMount');
    const component = TestUtils.renderIntoDocument(<Component />);

    assert(spy.calledOnce);
});

it('does something with specific initial state', () => {
    const stub = stubComponentMethod(Component, 'getInitialState').returns({
      foo: 'bar' // the stubbed/mocked initial state
    });
    const spy = spyOnComponentMethod(Component, 'someSpecialMethod'); // gets called if state.foo === 'bar'
    const component = TestUtils.renderIntoDocument(<Component />);

    assert(spy.calledOnce);

    stub.restore();
});

The examples are written in ES6 but you can use this library without problems with ES5.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100