E2E 用 TestCafe 测试 React 应用程序

原文：https://medium.com/hackernoon/e2e-testing-react-applications-with-testcafe-8edb605ec66c

介绍

诞生于 T4 脸书 T5 实验室的 React T7 在开发复杂用户界面的 web 应用程序的开发人员中非常受欢迎。React 被广泛应用于需要易于扩展、简单维护和快速性能的单页面应用程序项目中，已经成为 JavaScript 开发者社区事实上的标准。像脸书、网飞、Airbnb 和许多其他公司使用 React 作为主要框架来构建他们服务的用户界面。

React 对应用程序结构使用基于组件的方法，让用户通过组合拥有自己的行为、状态和视图的组件来构建应用程序 UI。这样，React 为 HTML 元素增加了另一个抽象层。为了使 React 开发人员在编写 e2e 测试时能够保持基于组件的范式，我们 TestCafe 团队制作了testcafe-react-selectors——一个引入本地方法来测试 React 应用的插件。

在本文中，我们将使用 TestCafe 来测试 React TodoMVC 应用程序。

Todo MVC 应用程序

要部署 TodoMVC 应用程序进行测试，请在https://github.com/reactjs/redux克隆 Redux 存储库，并打开 Todo MVC 示例目录(/examples/todomvc)。安装依赖项并从该目录运行npm start以开发模式构建应用程序。

git clone https://github.com/reactjs/redux
cd redux/examples/todomvc

npm install
npm start

该应用程序将被部署在 http://localhost:3000 。

它具有以下组件结构。

TestCafe 设置

首先，从 npm 安装 TestCafe。

npm install -g testcafe

然后安装testcafe-react-selectors模块。

npm install -g testcafe-react-selectors

对于testcafe-react-selectors文档，请访问其库。

页面对象

让我们创建一个与上面的 JSX 标记相对应的页面对象。我们将使用 ES6 类语法来定义您将在测试中与之交互的组件结构。

创建一个page-object.js文件并导入testcafe-react-selectors模块。在该文件中，创建一个表示 TodoMVC 应用程序页面的类。使用 ReactSelector 构造函数为所需的页面元素创建选择器。

我们为输入新任务的字段和当前任务列表创建了选择器。

测试 TodoMVC 应用程序

创建一个 fixture 文件todomvc.js并将指定为起始页。要使用应用程序页面，请使用 page 对象导入一个模块，并创建一个 page 类实例。

ReactSelector是围绕[Selector](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html)对象的包装器，所以在处理结果元素时，我们可以使用 TestCafe 选择器的全部功能。

让我们编写一个测试，向 Todo 列表添加一个新元素

要了解更多关于 TestCafe 断言的信息，请参见断言 API 。