使用 React 和 Selenium-Webdriver 和 Rails 作为后端的前端测试答案

【问题标题】：Front-end testing using React and Selenium-Webdriver with Rails as Backend使用 React 和 Selenium-Webdriver 和 Rails 作为后端的前端测试
【发布时间】：2018-09-11 14:39:10
【问题描述】：

我只想测试前端部分。所以，这是我的问题：

背景

我有一个强大的 Ruby on Rails (V3.2) 后端应用程序和一个全新的独立前端应用程序，带有 ReactJs (V16.4)。

问题

我们开始在 Selenium-Webdriver 和 JestJs 的帮助下测试 React 应用程序，我们尝试了几个视图，但是当我们向 rails API 发出 POST 请求时出现了问题。

我不想因为测试而用垃圾填充我的数据库（开发）。

例如：当我想测试新用户的创建时会发生什么？

可能的解决方案思考

我在考虑 3 个解决方案：

拦截 API 调用并通过模仿它们的响应来模拟它们（例如：在使用 selenium-webdriver 提交点击时）。
通过 React 使用 Rails 测试环境
只需将 API 调用还原为相反的操作，这将意味着在控制器中创建经常不受欢迎的操作。（例如：删除每个帖子）

【问题讨论】：

如果对您有帮助，请考虑将我的答案标记为正确

标签： ruby-on-rails reactjs testing selenium-webdriver jestjs

【解决方案1】：

这取决于您是要测试整个堆栈（前端/后端）还是只测试前端部分。

前端测试

如果您只想测试前端部分，请使用您的第一个解决方案：模拟 API 调用。

如果你直接使用 selenium-webdriver，你会受到限制。我建议使用nightwatch 或testcafe。 Testcafe 不依赖于硒。这在最新版本的 Nightwatch 中也是可选的。

Testcafe 包含一个请求模拟 API：http://devexpress.github.io/testcafe/documentation/test-api/intercepting-http-requests/mocking-http-responses.html

使用 Nightwatch，您可以使用 nock。见Nightwatch Mock HTTP Requests

全栈测试

如果您想测试整个堆栈，您可以使用这种方法：实现一个自定义 API 端点，以允许在测试执行之前或之后将您的数据库重置为干净的状态。（如“/myapi/clean”）

您应该在生产环境中禁用对此端点的访问。

然后您可以实现测试挂钩（之前/之后）来调用您的自定义 api 端点：

【讨论】：

我只是想测试前端部分。我已经搜索过，但我没有找到如何使用 selenium-webdriver 模拟 API 调用，也许我应该使用其他工具而不是 selenium-webdriver
我更新了我的答案，提供了有关模拟 API 调用以及指向 nigthwatch 和 testcafe 解决方案的链接的更多详细信息

【解决方案2】：

你可以有一个测试环境。根据我的经验，测试产生的垃圾数据并不是什么大问题。您可以定期清理它。或者，您可以为每次测试运行创建一个新环境。

【讨论】：

【解决方案3】：

最后我决定将enzyme 与jest 和sinon 一起使用。

示例代码：

import { mount } from "enzyme";
import sinon from "sinon";

beforeAll(() => {
 server = sinon.fakeServer.create();
 const initialState = {
  example: ExampleData,
  auth: AuthData
 };
 wrapper = mount(
  <Root initialState={initialState}>
    <ExampleContainer />
  </Root>
 );
});

it("example description", () => {
  server.respondWith("POST", "/api/v1/example", [
    200,
      { "Content-Type": "application/json" },
      'message: "Example message OK"'
    ]);
  server.respond();
  expect(wrapper.find(".response").text().to.equal('Example message OK');
})

在上面的代码中，我们可以看到如何使用酶创建的测试 DOM 拦截 API 调用，然后使用 sinon 模拟 API 响应。

【讨论】：