### Introduction

Born deep inside [Facebook](https://hackernoon.com/tagged/facebook) labs, [React](https://facebook.github.io/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](https://hackernoon.com/tagged/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](https://devexpress.github.io/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](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](http://localhost:3000/).

It has the following component structure.

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.

![](https://avatars2.githubusercontent.com/u/12047804?v=3&s=400)

You can find more information about the TestCafe command line interface [here](https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html).

### Extending TestCafe Functionality

Learn more about the TestCafe ecosystem [here](https://github.com/DevExpress/testcafe#testcafe-ecosystem). 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](https://devexpress.github.io/testcafe/documentation/extending-testcafe/browser-provider-plugin/) and [customize the test run report format](https://devexpress.github.io/testcafe/documentation/extending-testcafe/reporter-plugin/).

### Community

If you have question regarding TestCafe — feel free to ask on our [forum](https://testcafe-discuss.devexpress.com/) or [GitHub page](https://github.com/DevExpress/testcafe)!

AirBnB

Facebook

Netflix

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

E2E Testing React applications with TestCafe

Too Long; Didn't Read

Companies Mentioned

@amoskovkin

RELATED STORIES