使用React和Selenium-Webdriver和Rails作為后端進行前端測試

Question

我只想測試前端部分。 所以，這是我的問題：

背景

我有一個健壯的Ruby on Rails（V3.2）后端應用程序，以及一個帶有ReactJs（V16.4）的全新獨立的前端應用程序。

問題

我們開始在Selenium-Webdriver和JestJs的幫助下測試React應用，我們設法嘗試了幾種視圖，但是當我們向rails API發出POST請求時出現了問題。

由於測試，我不想用垃圾填滿我的數據庫（開發）。

例如：當我想測試新用戶的創建時會發生什么？

可能的解決方案

我在想3種解決方案：

1. 攔截API調用並通過模仿它們的響應來模擬它們（例如：使用selenium-webdriver提交點擊時）。
2. 通過React使用Rails測試環境
3. 只需執行相反的操作即可恢復API的調用，這意味着在控制器中創建通常不受歡迎的動作。 （例如：刪除每個帖子）

Answer 1

這取決於您要測試整個堆棧（前端/后端）還是僅測試前端部分。

前端測試

如果只想測試前端部分，請使用第一個解決方案：模擬API調用。

如果您僅直接使用selenium-webdriver，將會受到限制。 我建議使用夜表或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請求

全棧測試

如果要測試整個堆棧，則可以使用以下方法：實現自定義API端點，以允許在測試執行之前或之后將數據庫重置為干凈狀態。 （例如“ / myapi / clean”）

您應該在生產環境中禁用對此端點的訪問。

然后，您可以實現測試掛鈎（之前/之后），以調用您的自定義api端點：

• http://nightwatchjs.org/guide#using-before-each-and-after-each-hooks
• http://devexpress.github.io/testcafe/documentation/test-api/test-code-structure.html#test-hooks

Answer 2

您可以有一個測試環境。 根據我的經驗，測試生成的垃圾數據並不是什么大問題。 您可以定期清理它。 或者，您可以為每次測試運行創建一個新環境。

Answer 3

最后我決定在開玩笑和正午的時候使用酶 。

示例代碼：

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響應。