Testing the front end by utilizing React in combination with Selenium-Webdriver, while utilizing Rails as the backend

Question

Testing the front end by utilizing React in combination with Selenium-Webdriver, while utilizing Rails as the backend

Currently, I am focused on testing the Front-End aspect of my project. Here is the challenge I am encountering:

Situation

In my setup, I have a well-established Ruby on Rails (V3.2) backend application and a completely new front-end application built with ReactJs (V16.4).

Issue at Hand

While testing the React app using Selenium-Webdriver and JestJs, we were able to navigate through various views smoothly. However, we faced difficulties when attempting POST requests to the Rails API.

I am hesitant to clutter my development database with unnecessary data due to testing purposes.

For instance, how should I handle testing the creation of a new user?

Potential Solutions Considered

I have considered three possible approaches:

Intercept the API calls and simulate their responses (e.g., triggering a submission click using selenium-webdriver).
Utilize Rails test environment in conjunction with React
Attempt to reverse the API call by performing contradictory actions in the controller. This may involve executing deletes for each post request.

ruby-on-rails reactjs testing selenium-webdriver jestjs

Answer 1

Answer №1

When deciding on how to approach testing, consider whether you want to test the entire stack (frontend/backend) or just focus on the frontend aspect.

Frontend Testing

If your goal is to solely test the frontend, then using mock API calls as your initial solution is recommended.

Directly relying on selenium-webdriver may limit your options. Instead, consider utilizing tools like nightwatch or testcafe. Notably, Testcafe does not require selenium and this feature has also become optional in recent releases of Nightwatch.

Testcafe even offers a Request mocking API:

In Nightwatch, you have the option of using nock for mocking HTTP requests. You can find more information at Nightwatch Mock HTTP Requests

Full Stack Testing

If a comprehensive evaluation of the entire stack is what you seek, consider implementing a custom API endpoint that facilitates database resetting to ensure a pristine state before or after test executions (e.g., "/myapi/clean").

For security reasons, make sure to restrict access to this endpoint in production environments.

You can further enhance your testing strategy by incorporating test hooks (before/after) to invoke your custom API endpoint:

Answer 2

When deciding on how to approach testing, consider whether you want to test the entire stack (frontend/backend) or just focus on the frontend aspect.

Frontend Testing

If your goal is to solely test the frontend, then using mock API calls as your initial solution is recommended.

Directly relying on selenium-webdriver may limit your options. Instead, consider utilizing tools like nightwatch or testcafe. Notably, Testcafe does not require selenium and this feature has also become optional in recent releases of Nightwatch.

Testcafe even offers a Request mocking API:

In Nightwatch, you have the option of using nock for mocking HTTP requests. You can find more information at Nightwatch Mock HTTP Requests

Full Stack Testing

If a comprehensive evaluation of the entire stack is what you seek, consider implementing a custom API endpoint that facilitates database resetting to ensure a pristine state before or after test executions (e.g., "/myapi/clean").

For security reasons, make sure to restrict access to this endpoint in production environments.

You can further enhance your testing strategy by incorporating test hooks (before/after) to invoke your custom API endpoint:

Answer 3

Answer №2

One solution could be to create a testing sandbox. In my opinion, the clutter of test-generated data is manageable as you can regularly purge it or opt for a fresh environment per test cycle.

Answer 4

One solution could be to create a testing sandbox. In my opinion, the clutter of test-generated data is manageable as you can regularly purge it or opt for a fresh environment per test cycle.

Answer 5

Answer №3

After much consideration, I ultimately opted to utilize enzyme in conjunction with jest and sinon.

Here is an example of the 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("description of the example", () => {
  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');
})

The above code showcases how we can intercept API calls using the testing DOM generated by enzyme and then simulate API responses utilizing sinon.

Answer 6

After much consideration, I ultimately opted to utilize enzyme in conjunction with jest and sinon.

Here is an example of the 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("description of the example", () => {
  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');
})

The above code showcases how we can intercept API calls using the testing DOM generated by enzyme and then simulate API responses utilizing sinon.

Testing the front end by utilizing React in combination with Selenium-Webdriver, while utilizing Rails as the backend

Situation

Issue at Hand

Potential Solutions Considered

Answer №1

Frontend Testing

Full Stack Testing

Answer №2

Answer №3

Similar questions

Specify the dependencies in the package.json file to ensure that the React package designed for React v17 is compatible with React v18 as well

`It is important to note that in Tailwind CSS, `h-8` does not supersede `h-4

How to retrieve session information in a Next.js page utilizing withIronSession()

Troubleshooting: Border not showing up in Tailwind CSS (React JS)

Encountering the "excessive re-renders" issue when transferring data through React Context

Limit file selection to images using MUI File Input

Using TypeScript to define data types for Supabase payloads

I am having trouble locating the xpath for a randomly selected radio button in Selenium

Discovering the search functionality in React Native

The deployment of my Next.js app on Heroku was refused due to an incompatible Node version

Magician's Spellbinding Form - React Final Incantation

The command "npm start" fails to execute on Windows operating systems

extract text content from anomalous html using selenium and python

Establishing a connection to an Oracle database using ReactJS

Unable to locate image files stored in vendor/images in the Rails 4 view

What is the significance of the message "JavaScript files do not have any valid rules specified"?

Dynamic styling updates on page refresh in Next.js

What is the best way to transform a JS const into TSX within a Next.js application?

Utilize a solo input field to upload either a video or image, and showcase a preview of the uploaded content in a

Managing state - It is not possible to update a component (`Provider`) while rendering another component