react-component-tester
v0.4.0
Published
A simple helper to make testing react components with shallow rendering easier
Downloads
150
Maintainers
Readme
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