Specific URL support?

[DaveStein]

Forgive me if I missed something in the manual, but it looks like the only way to mock multiple calls is via an array of mockResponses where you know the order. Or just knowing there is only one request. I have simple mock like this:

const data = [{
  "a": 1
}, {
  "b": 2
}];

fetch.mockResponse(JSON.stringify({data}));

When I had used jasmine-ajax in the past, I could ensure this was the response for a given request URL. Consider the case where I am mocking two calls that just need to return a 200 code. By looking at the test, I would have no idea what calls are being mocked other than going into the real object and checking the order of them.

[wopian]

Also helpful for testing the correct URL queries are being called for API wrappers

axios-mock-adapter handles it with:

mock.onGet('/example?filter[text]=hello').reply({ response })

[jefflau]

Sorry I did not document this better. The mocking library uses Jest's mocking functionality underneath so you can actually obtain the mock state and the arguments that are passed to it by doing fetch.mock. I've added documentation and examples here: https://github.com/jefflau/jest-fetch-mock#using-fetchmock-to-inspect-the-mock-state-of-each-fetch-call

Let me know if that solves your issue.

[jefflau]

Closing this for now. Reopen if this is still an issue

[thekarel]

A minimal example to clarify a bit more:

fetch.mockImplementation((url) => {
  if (url === '/a') {
    return Promise.resolve(new Response(JSON.stringify('a'))) 
  }

  return Promise.resolve(new Response(JSON.stringify('b')))
})

[adamscybot]

@jefflau I think this is still an issue. If you want to respond on a particular URL you could use the solution by @thekarel above, but you could just do that with with a plain jest.fn().mockImplementation(). You lose all the benefits of this package to automatically build the response object.

[jefflau]

@adamscybot have you got some code to explain what you'd want the expected behacior to be?

Did you check the docs i linked to?

https://github.com/jefflau/jest-fetch-mock#using-fetchmock-to-inspect-the-mock-state-of-each-fetch-call

[nlenoire]

I agree with other comments, and face the same pitfall. Being able to configure the mock with a mapping (url -> response) seems to be a minimum for such package.

[msteitle]

I agree. It is a struggle to debug a failure when an unexpected request is being made that is returned response data from a mock for an intended request because the mock mechanism behaves like a simple queue. This issue is not about seeing the details of the request after the fact. It's about better control over defining it beforehand.

[scousino]

I believe the base fetch-mock package supports mocks for specific URLs. Check out their API docs here: http://www.wheresrhys.co.uk/fetch-mock/#api-mockingmock

[gustiando]

Frustrating. fetch-mock suggested above worked much more seamless with basically:

const fetchMock = require('fetch-mock');
const url = "http://test.com";
fetchMock.mock(url, { status: 200, body: { } });
// Below is what the production code would be calling somewhere in its logic
fetch(url).then((response) => console.log(response));

[ErlanBazarov]

Is this going to be added? Something like fetch(url, method).mockResponse(mockedResponse) would be great

[DaveStein]

https://www.npmjs.com/package/fetch-mock-jest exists now, and is built on top of fetch-mock as listed above. Confusing as the NPM repos are just swapped words