Test your REACT app efficiently with Protractor

Programmer Life

The Missing Piece

Installation

npm install --save protractor-react-selector

Configuration

exports.config = {// ... the rest of your configplugins: [    {    // The module name    package: "protractor-react-selector"    }
]
onPrepare: async () => { await browser.waitForAngularEnabled(false);
//you can do magic here. See the Pro-tip in later section
}
};

How to use React Selector

  • timeOut — optional (defaults to10000 ms)
  • reactRoot -optional (defaults to ‘#root’)
  • component name — required
  • props — optional
  • state — optional

Wait for application to be ready to run tests

await browser.waitForReact(30000);

Wait to Load React for different react roots

const App = () => (
<div id='mount'>
<MyComponent />
<MyComponent someBooleanProp={true} />
</div>
)
await browser.waitForReact(10000, '#mount')

Element filtration by Props and States

const myElement = element(
by.react('MyComponent', { someBooleanProp: true }, { someBooleanState: true })
);

Wildcard selection

// Partial Match
const myElement = element(by.react('My*', { someBooleanProp: true }));
// Entire Match
const myElement = element(by.react('*', { someBooleanProp: true })); // return all components matched with the prop

Sample Tests

How to find React Components and Props

REACT DEV TOOL
const link=element(by.react('u',{name:  "freeCodeCamp"}));
link.click();

Pro-Tip:

onPrepare: async () => {
await browser.waitForAngularEnabled(false);
}
exports.config = {// ... the rest of your configplugins: [  {   // The module name   package: "protractor-react-selector"  },{
package: 'protractor-testability-plugin'
} ]onPrepare: () => { // delete the waitforAngular statement
}
};

Parking Lot

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store