Front-end testing using React and Selenium-Webdriver with Rails as Backend

Question

I just want to test the Front-End part. So, here is my problem:

Background

I have a robust Ruby on Rails (V3.2) backend app and an entiry new and separate front-end app with ReactJs (V16.4).

Problem

We begin to test React app with the help of Selenium-Webdriver and JestJs, we managed to try several views, but the problem arose when we made POST requests to the rails API.

I don't want to fill my database (development) with garbage because of the tests.

Ex: What happens when I want to test the creation of a new user?.

Possible solutions thought

I was thinking in 3 solutions:

Intercept the API calls and mock them by imitating their response (ex: at submitting click using selenium-webdriver).
Make use of Rails test environment through React
Just revert the call of the API doing the opposite, this would mean creating often undesirable actions in the controller. (ex: doing a delete for each post)

Please consider marking my answer as correct if it helped you — Ricovitch
– Ricovitch, Commented Oct 19, 2018 at 11:21

Ricovitch · Accepted Answer · 2018-09-12 10:53:03Z

1

It depends if you want to test the whole stack (frontend/backend) or only the frontend part.

Frontend tests

If you only want to test the frontend part go with your first solution : mock API calls.

You will be limited if you just use the selenium-webdriver directly. I would recommend using nightwatch or testcafe. Testcafe does not depend on selenium. This is also optional in the latest versions of Nightwatch.

Testcafe includes a Request mocking API : http://devexpress.github.io/testcafe/documentation/test-api/intercepting-http-requests/mocking-http-responses.html

With Nightwatch you could use nock. See Nightwatch Mock HTTP Requests

Full stack tests

If you want to test the whole stack, you may use this approach : implement a custom API endpoint to allow for resetting your database in a clean state before or after tests execution. (like "/myapi/clean")

You should disable access to this endpoint in production environments.

You can then implement test hooks (before/after) to call your custom api endpoint :

edited Sep 12, 2018 at 10:53

answered Sep 11, 2018 at 15:14

Ricovitch

2,3481 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fcabanasm Over a year ago

I just want to test the front-end part. I have searched, but I have not found how to mock the API calls using selenium-webdriver, maybe I should use another tool instead of selenium-webdriver

Ricovitch Over a year ago

I updated my answer with more details on mocking API calls and links to nigthwatch and testcafe solutions

Herman Starikov · Accepted Answer · 2018-09-11 17:06:33Z

0

You could have a test environment. From my experience, garbage data generated by tests is not such a big deal. You can periodically clean it up. Or you can spin up a new environment for every test run.

answered Sep 11, 2018 at 17:06

Herman Starikov

2,77417 silver badges27 bronze badges

Comments

fcabanasm · Accepted Answer · 2018-10-23 14:21:41Z

Finally I decided to use enzyme with jest and sinon.

example code:

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');
})

In the code above we can see how to intercept API calls using the test DOM created by the enzyme and then mock API responses using sinon.

Collectives™ on Stack Overflow

Front-end testing using React and Selenium-Webdriver with Rails as Backend

Background

Problem

Possible solutions thought

3 Answers 3

Frontend tests

Full stack tests

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Background

Problem

Possible solutions thought

3 Answers 3

Frontend tests

Full stack tests

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related