Edit

react$

The react$ command is a useful command to query React Components by their actual name and filter them by props and state.

NOTE: the command only works with applications using React v16.x

Usage

browser.react$({ options, props, state })

Parameters

Name	Type	Details
selector	String	of React component
options optional	ReactSelectorOptions	React selector options
options.props optional	Object	React props the element should contain
options.state optional	Array.<any>, number, string, object, boolean	React state the element should be in

Example

it('should calculate 7 * 6', () => {
    browser.url('https://ahfarmer.github.io/calculator/');

    browser.react$('t', {
        props: { name: '7' }
    }).click()
    browser.react$('t', {
        props: { name: 'x' }
    }).click()
    browser.react$('t', {
        props: { name: '6' }
    }).click()
    browser.react$('t', {
        props: { name: '=' }
    }).click()

    console.log($('.component-display').getText()); // prints "42"
});