#react component tester
because testing components with shallow rendering is fantastic...but can be a bit of a pain
#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
- 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
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
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 four child we would pass "3.2.1"
const value = NOTHING.findChild('0');
const actual = typeof value;
const expected = 'undefined';
assert.deepEqual(actual, expected);
###findComponents
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
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, mapsTo
propFunc takes a string which is the prop of a dumb component to which you are passing a function
mapTo takes a string which maps to the method on the smart component class
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')
.mapsTo('handleOnClick');
assert(isMapped);
###resetState
returns the state of the flavour of the component under test to the initial state
##properties
###component
the rendered component that is under test
###props
the props of the rendered component will be returned for each component found
###style
for ease of use, the style prop is placed on each component too
###type
each returned component will have a type
###value
if a component doesn't have any children, it's content will be added as the value property