E2E Testing React applications with TestCafe
Introduction
Born deep inside Facebook labs, React gained a huge popularity among the developers who make web applications with complex user interfaces. Being widely used in single-page application projects that require easy scaling, simple maintenance and fast performance, React has become a de facto standard for the JavaScript developer community. Companies like Facebook, Netflix, Airbnb and many others use React as a main framework to build the UI for their services.
React uses a component-based approach to the application structure offering users to build the application UI by combining components that possess their own behavior, state and view. With this, React adds another abstraction layer for HTML elements. To enable React developers to stay in the component-based paradigm while writing e2e tests, we at TestCafe team made testcafe-react-selectors
– a plugin that introduces a native approach to testing React applications.
In this article, we will use TestCafe to test the React TodoMVC application.
Todo MVC Application
To deploy the Todo MVC app for testing, clone the Redux repository at https://github.com/reactjs/redux and open the TodoMVC example directory (/examples/todomvc). Install the dependencies and run npm start
from this directory to build the application in the development mode.
git clone https://github.com/reactjs/redux
cd redux/examples/todomvc
npm install
npm start
The application will be deployed at http://localhost:3000.
It has the following component structure.
TestCafe Setup
First, install TestCafe from npm.
npm install -g testcafe
Then install the testcafe-react-selectors
module.
npm install -g testcafe-react-selectors
For testcafe-react-selectors
documentation, visit its repository.
Page Object
Let’s create a page object that corresponds to the JSX markup above. We will use the ES6 class syntax to define the components structure with which you will interact in tests.
Create a page-object.js
file and import the testcafe-react-selectors
module. In this file, create a class that represents the TodoMVC application page. Use the ReactSelector constructor to create selectors for the required page elements.
We have created selectors for a field where a new task is entered and the list of the current tasks.
Test TodoMVC applicaiton
Create a fixture file todomvc.js
and specify http://localhost:3000 as a start page. To work with the application page, import a module with the page object and create a page class instance.
ReactSelector
is a wrapper around the Selector
object, so we can use the full power of TestCafe selectors when working with the resulting elements.
Let’s write a test that adds a new element to the Todo list
To learn more about TestCafe assertions, see Assertion API.
Component state and properties
testcafe-react-selectors
allow you to get the state and props of a React component using the getReact
method. This method returns an object that contains the component state and properties. Alternatively, you can pass a function that selects a specific property to return. Consider the following example: we need to mark a task as completed and test that the respective component has changed its property.
Running tests
Run the test from the console using the following command:
testcafe chrome todomvc.js
TestCafe will run the test in Google Chrome and output the following report:
To test in multiple browsers in parallel, you can use a comma-separated list like chrome,firefox,edge
or the all
alias to run tests in all locally installed browsers.
testcafe all todomvc.js
You can also define the npm test
command that will run TestCafe tests. Note that you need a locally installed TestCafe module to launch tests from an npm script. To introduce the npm test
command, add the following code to the project’s package.json
file.
You can find more information about the TestCafe command line interface here.
Extending TestCafe Functionality
Learn more about the TestCafe ecosystem here. If you need more functionality in test code, you can use any node.js module. TestCafe also provides the extended capabilities to use portable and remote browsers and customize the test run report format.
Community
If you have question regarding TestCafe — feel free to ask on our forum or GitHub page!
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!