React Page Object

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

import React, { Component } from 'react'
import Page from 'react-page-object'

class Counter extends Component {
  state = { count: 0 }

  addOne = () => this.setState({ count: this.state.count + 1 })
  addOneAsync = () => setTimeout(this.addOne, 100)

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.addOne}>Add one</button>
        <button onClick={this.addOneAsync}>Add one async</button>
      </div>
    )
  }
}

describe('Counter component', () => {
  let page

  beforeEach(() => {
    page = new Page(<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/)
    await page.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?