npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-component-tester

v0.4.0

Published

A simple helper to make testing react components with shallow rendering easier

Downloads

121

Readme

Circle CI Coverage Status dependencies npm Version License

react component tester

because testing components with shallow rendering is fantastic...but can be a bit of a pain and other testing libraries focus on finding components rather than providing an opinionated way of testing them, including their state.

requirements

  • test a component quickly (~5ms per test)
  • test the style of components easily
  • test the props of child components easily
  • test various "flavours" of props succinctly in a consistent uniform manner
  • find child components easily in a non-brittle manner
  • test prop wire-up on smart components
  • test changes of state of smart components
  • abstract away from the react components themselves and their API

usage

a component system that builds a basic responsive postcard can be found in the tests directory with example usage (which also self tests the library)

flavours

often you want to test how components are rendered with different prop values. this tester allows the addition of "flavours" to make the test code more terse

to create a tester, run create and pass in the component under test to "be used"

const tester = ReactTester.create().use(Address);

then add a flavour which takes a name and a props object

const NO_ADDRESS = tester.addFlavour('NO_ADDRESS', {
    addressee: 'Mr Robert Smith',
});

then the flavour can be tested on, here the NONE flavour's type is checked

const actual = NONE.type;
const expected = 'div';
    
assert.deepEqual(actual, expected);

methods

.countComponents(Component{ReactComponent}) => count{int}

takes a react component and returns the number of times it appears in the rendered tree for the component under test

here the THREE_LINES flavour is tested for the number of AddressLine components it would render if given three lines of address

it('render four address lines if there are three lines in the given address', () => {
    const actual = THREE_LINES.countComponents(AddressLine);
    const expected = 4;

    assert.deepEqual(actual, expected);
});

.findChild(path{string}) => child{ReactComponent}

takes a zero based decimal delimited string path and returns the resulting rendered component. this will make your tests more brittle to DOM changes but can come in handy

here the first child is found. if we wanted the second child of the third child of the fourth child we would pass "3.2.1"

const value = NOTHING.findChild('0');
const actual = typeof value;
const expected = 'undefined';

assert.deepEqual(actual, expected);

.findComponents(Component{ReactComponent}) => [Component{ReactComponent}]

takes a react component and returns an array of all child rendered components of that type

here we find all AddressLine components for the NO_ADDRESS flavour, take the first one and check that it is the addressee

const addressee = NO_ADDRESS.findComponents(AddressLine)[0];
const actual = addressee.props.text;
const expected = 'Mr Robert Smith';

assert.deepEqual(actual, expected);

.getState() => state{object}

returns the current state of the given component flavour. resetState should be run after each test to ensure tests do not collide

here we fire the click function given to the dumb component and confirm that the smart component's state is updated correctly

NONE.component.props.onClick();

const actual = NONE.getState().type;
const expected = stampTypes.FIRST_CLASS;

assert.deepEqual(actual, expected);

.propFunc(propName{string}), .withArgs(arguments{array}) [optional], .mapsTo(methodName{string}) => isMapped{boolean}

propFunc takes a string which is the prop of a dumb component to which you are passing a function

mapsTo takes a string which maps to the method on the smart component class

if your mapsTo method expects some specific arguments, these can be passed as an array using withArgs

the returned value will be a boolean indicating if the given prop function maps to the expected class method

here we test that the stamp dumb component was correctly given the smart component's handleOnClick method

const isMapped =
        NONE
            .component
            .propFunc('onClick')
            .withArgs({ test: 123 })
            .mapsTo('handleOnClick');

assert(isMapped);

.resetState()

returns the state of the flavour of the component under test to the initial state

.teardown() => {ReactComponentTester}

If for any reason you need to restore spies placed on a component as part of set up you can use the teardown method. Returns the tester.

const tester = ReactTester.create().use(Address);
// Do stuff...
tester.teardown();

properties

component{renderedReactComponent}

the rendered component that is under test

props{object}

the props of the rendered component will be returned for each component found

style{object}

for ease of use, the style prop is placed on each component too

type{componentType}

each returned component will have a type

value{string}

if a component doesn't have any children, it's content will be added as the value property

config

all methods are spied on by default, if for some reason you would like to remove them you can pass a config on create

ReactTester.create({
    spyOnDefault: false,
    spyOn: {
        someMethod: false,
    },
}).use(SomeComponent);

You can either pass:

  • spyOnDefault as false to disable all spies
  • a spyOn config to disable per method