Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mocked fetch response cannot dynamically change HTTP status, status text or headers #116

Open
JohnAlbin opened this issue Jun 27, 2022 · 8 comments
Labels
feature request New feature or request

Comments

@JohnAlbin
Copy link

JohnAlbin commented Jun 27, 2022

When mocking fetch responses, we should have full dynamic control over all aspects of the Response object, including:

  • body
  • status
  • statusText
  • headers

Currently, we only have this:

  • body: static object or dynamic based on request (when setting the mocked response to a function)
  • status: static number; no ability to dynamically change it based on request
  • statusText: no control at all
  • headers: no control at all

Example use case

I have a fetch endpoint that various authentication tasks and they all use the same URL; the endpoint returns different data, status codes and headers depending on the request body.

In one story, I have a page component that needs to have the client credential request respond with HTTP 200 immediately followed by another request to the same endpoint that should respond with HTTP 500 (mocking a user validation error).

@JohnAlbin JohnAlbin changed the title Function-based mock response cannot change HTTP status Mocked fetch response cannot dynamically change HTTP status, status text or headers Jun 27, 2022
@yormy
Copy link

yormy commented Sep 30, 2022

would be nice indeed to have that ability

@JohnAlbin
Copy link
Author

@yormy This missing feature was a deal breaker for me; I needed to test successful endpoint responses and failures. I ended up writing my own Storybook wrapper around the fetch-mock library.

https://github.com/JohnAlbin/storybook-addon-fetch-mock

@iliakan
Copy link

iliakan commented Feb 14, 2023

@JohnAlbin your code only mocks fetch, but Angular uses XHR, so it's important to note that it's not compatible with Angular apps. Unlike this module =)

@iliakan
Copy link

iliakan commented Feb 14, 2023

And yeah, this module is mockingly powerless to do real mocking. Can't set headers etc, that's just pathetic.

@JohnAlbin
Copy link
Author

your code only mocks fetch, but Angular uses XHR, so it's important to note that it's not compatible with Angular apps.

Fair enough. But if an app needs XHR mocking, it's pretty clear storybook-addon-fetch-mock only does fetch mocking.

And yeah, this module is mockingly powerless to do real mocking. Can't set headers etc, that's just pathetic.

Don't be unkind. Just because storybook-addon-mock doesn't solve our issues, doesn't mean it can't solve lots of other people's issues.

@iliakan
Copy link

iliakan commented Feb 14, 2023

Don't be unkind. Just because storybook-addon-mock doesn't solve our issues, doesn't mean it can't solve lots of other people's issues.

Well, after I invested time into integrating this module, it just doesn't work for anything beyond simple things. That's quite unkind from the module.

Imagine you take a car, it goes 10km and stops middle-way. Not what you'd expect ;(

That said, I appreciate the time @nutboltu spent developing this and making it open source.
There's just a small step further. I'll try to make a PR and hopefully one day the author accepts it.

@yormy
Copy link

yormy commented May 20, 2023

Added MR for customized status code returns

@nutboltu nutboltu added the feature request New feature or request label Sep 20, 2023
@NeilujD
Copy link

NeilujD commented Jan 12, 2024

I've just added a PR for adding response headers option support
#206

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants