Useful utility functions for testing React components.
Table of contents
npm install react-test-util --save-dev
;;;;const wrapper = ;;const showClass = 'test-show-class';const hideClass = 'test-hide-class';;
Utility functions to help testing React components with Enzyme.
getEvent(type: string, props?: object): object
Create a mock object representing event data.
Simulate receiving of specified event by component/element.
target: ReactElement | ShallowWrapper- Component that will undergo event simulation or ShallowWrapper for such component.
eventData: array | object | string- Event type, object with event properties or array containing such items.
Returns passed or created ShallowWrapper for which event simulation was made.
checkWrapperAndUnmount(target, checkSet, settings)
Make specified checks for component's shallow wrapper and then unmount component.
target: ReactElement | ShallowWrapper- Component that will undergo checks or ShallowWrapper for such component.
checkSet: object- Specifies checks that will be made.
checkSet.hasClass?: object | string- Checks for CSS classes which the component should or should not have. When array of strings is passed it means that the component should have all specified CSS classes. In case when object is passed, object's fields are CSS classes and field values are boolean values that specifies whether component should (when
true) or should not (when
false) have the corresponding class. See hasClass.
checkSet.html?: string- Checks whether component has the specified rendered HTML markup. See html.
checkSet.prop?: object- Checks whether component has the specified props. Objects fields are prop names, field values are values that should have corresponding props. See prop.
checkSet.state?: object- Checks whether component has the specified state fields. Objects fields are state field names, field values are values that should have corresponding state fields. See state.
checkSet.text?: string- Checks whether component has the specified rendered text. See text.
checkSet.type?: Function | string- Checks whether component's node has the specified type. See type.
settings?: object- Operation settings.
settings.expect?: object- Assertion function that should be used for checking. Should have API similar to chai's expect (at least equal and eql methods). By default chai's expect is used.
settings.setProps?: object- Specifies props that should be set for component before checks are started. See setProps.
Utility functions to test code that uses react-intl.
getIntl(props?: object | string): IntlShape
Create object that provides access to i18n/intl functions (IntlShape).
props specifies properties or locale of object that will be created.
addIntlProp(target?: object, intlProps?: object): object
intl field in the given object.
Value of the field is an object that provides access to i18n/intl functions
target?: object- Target object into which
intlfield should be added. If target object is not specified, newly created object will be used and returned.
intlProps?: object- Properties or locale of
intlobject that will be created.
Returns object with
intl field (value of
target parameter or newly created object when
target is not specified).
In lieu of a formal styleguide, take care to maintain the existing coding style.
Copyright (c) 2019 Denis Sikuler
Licensed under the MIT license.