背景

我有一个功能强大的Ruby on Rails（V3.2）后端应用程序，以及一个带有ReactJs（V16.4）的全新独立前端应用程序。

问题

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

由于测试，我不想用垃圾填满我的数据库（开发）。

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

可能的解决方案思想

我在想3种解决方案：

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

Answer 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端点：

Answer 2

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

Answer 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响应。

使用React和Selenium-Webdriver和Rails作为后端进行前端测试

背景

问题

可能的解决方案思想

3 个答案:

前端测试

全栈测试