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' state = count: 0 this { return <div> <h1>thisstatecount</h1> <button =>Add one</button> <button =>Add one async</button> </div> }
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