React Page Object

This library gives you the ability to write the following integration tests:

importReact,{Component}from'react'importPagefrom'react-page-object'classCounterextendsComponent{state={count: 0}addOne=()=>this.setState({count: this.state.count+1})addOneAsync=()=>setTimeout(this.addOne,100)render(){return(<div><h1>{this.state.count}</h1><buttononClick={this.addOne}>Add one</button><buttononClick={this.addOneAsync}>Add one async</button></div>)}}describe('Counter component',()=>{letpagebeforeEach(()=>{page=newPage(<Counter/>)})afterEach(()=>{page.destroy()})it('sets the initial count to 0',()=>{expect(page.content()).toMatch(/0/)})it('adds one to the count when the \'Add one\' button is clicked',()=>{page.clickButton('Add one')expect(page.content()).toMatch(/1/)})it('adds one to the count after a delay when the \'Add one async\' button is clicked',async()=>{page.clickButton('Add one async')expect(page.content()).not.toMatch(/1/)awaitpage.waitUntil(()=>page.contentMatches(/1/))expect(page.content()).toMatch(/1/)})})

This was test written in Jest. However, This library can be used with any test runner or assertion library that is compatible with Enzyme.

Installation

$ npm install --save-dev react-page-object

enzyme is a peer dependency of react-page-object, so you will need to install it if you have not done so already. Additionally, react-dom and react-addons-test-utils are peer dependencies of enzyme, so install those as well if you are missing them.

$ npm install --save-dev enzyme
$ npm install --save-dev react-dom
$ npm install --save-dev react-test-renderer

If you are new to testing in React, check out the following guides to get you up and running:

• Set up with Jest in Create React App (Recommended)
• Set up Karma with Mocha and Chai in Create React App
• Set up Karma with Jasmine in Create React App

API

Set Up Methods

.constructor(reactElement[, options]) => Page

Create a Page object

.destroy()

Destroy a Page object

Find Wrapper Methods

.findWrapperForCheck(propValue[, options]) => ReactWrapper

Find a checkbox

.findWrapperForChoose(propValue[, options]) => ReactWrapper

Find a radio button

.findWrapperForClickButton(propValue[, options]) => ReactWrapper

Find a button

.findWrapperForClickInput(propValue[, options]) => ReactWrapper

Find a clickable input

.findWrapperForClickLink(propValue[, options]) => ReactWrapper

Find a link

.findWrapperForFillIn(propValue[, options]) => ReactWrapper

Find a text input

.findWrapperForFillInTextarea(propValue[, options]) => ReactWrapper

Find a textarea

.findWrapperForSelect(propValue, childrenPropValueForOption, [, options]) => ReactWrapper

Find a select box

Interaction Methods

.blurFocusedElement() => Page

Blur the currently focused element.

.check(propValue[, options]) => Page

Check a checkbox

.choose(propValue[, options]) => Page

Choose a radio button

.clickButton(propValue[, options]) => Page

Click a button

.clickInput(propValue[, options]) => Page

Click a clickable input

.clickLink(propValue[, options]) => Page

Click a link

.fillIn(propValue, eventTargetValue[, options]) => Page

Fill in a text input

.fillInTextarea(propValue, eventTargetValue[, options]) => Page

Fill in a textarea

.select(propValue, childrenPropValueForOption[, options]) => Page

Select an option from a select box

.uncheck(propValue[, options]) => Page

Uncheck a checkbox

Utility Methods

.content() => String

Returns the page text

.contentMatches(matcher) => Boolean

Returns whether or not the page text matches the given matcher

.currentPath() => String

Returns the current URL path

.outputOpenPageCode()

Output to the console a code snippet to view the page HTML

.waitUntil(callback[, options]) => Promise

Wait until a certain condition is met. Useful for testing asynchronicity

FAQs

• Do you have additional examples?