0

I'm trying to stub an API request using Webmock. Instead of getting the "real" data from my Rails controller, I want to return dummy data, for test purposes only.

I have a React frontend with a button that fetches my api endpoint:

const handleClick = async () => {
    const response = await fetch("api_endpoint");
    const data = await response.json();
    console.log("data: ", JSON.stringify(data));
  };

This is my test file:

require 'rails_helper'
require 'spec_helper'

RSpec.describe 'visiting the embedded app', type: :system do
  it 'visits the embedded app' do
    stub_request(:get, 'api_endpoint').to_return(
      body: { data: 'dummy' }.to_json
    )

    visit 'my react page with the button'
    click_button "Call API"
    sleep 10
    random_assert
  end
end

Instead of getting data: dummy, I get the "real" data from by rails controller.

What is wrong with this implementation? Tell me if you need more information!

baggiogiacomo
  • 179
  • 10

1 Answers1

1

You have fundamentially missunderstood how HTTP stubbing in tests works. WebMock is used to stub HTTP requests sent from your server to other servers.

I'm assuming this is WebMock but the same applies to pretty much any other server side HTTP stubbing tool.

It does not stub requests sent from the client - simply becuase this code isn't even running in the client. That is done with javascript libraries like Mirage JS running in the client or by sending the requests to endpoints on the server that return dummy data instead of the actual implementation.

max
  • 96,212
  • 14
  • 104
  • 165
  • So you're telling me that I cannot stub that request? Is there an easy way to do this? (Yes, I'm using [WebMock](https://github.com/bblimke/webmock) + Capybara) – baggiogiacomo Feb 09 '23 at 07:05
  • I'm telling you that you need to understand the difference between server and client side. WebMock runs in the server and stubs http requests sent by the server. There are tools like mirage.js that run in the client which stub ajax requests from the browser. Instead of looking for a quick and easy answer you should probably put some effort into learning the fundamentals. – max Feb 09 '23 at 10:20
  • I know the difference, it's just my first time stubbing http calls. I thought that the client makes us a get call, we receive that request, instead of giving back the "real" data, we give back the fake one. P.S: client and server are on the same ip address. client localhost:1234 makes a get call to localhost:1234/api/test What am I doing is a Shopify app made in rails with the "frontend" part made in React (using Vite). I've used this template: https://github.com/Shopify/shopify-frontend-template-react – baggiogiacomo Feb 09 '23 at 13:44
  • It doesn't really matter if they are in the same address since its three completely seperate processes - the test, your rails server, and the browser. What you're talking about is stubbing the response from the server which is something very different from what Webmock does which is stub outgoing HTTP calls from the server. That can be done by stubbing the controller method. – max Feb 09 '23 at 16:10