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.
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
The application will be deployed at 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
You can find more information about the TestCafe command line interface here.
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.