The fetch API supports not only strings that represent URLs, but also objects with a stringifier that provides a URL. An instance of a URL object is an example of such an object.
However, I found that mocked requests do not work if the resource supplied to fetch is an instance of a URL object. For instance:
const someFakeUrl = `${window.location.origin}/foo/bar`;
const someFakeUrlObj = new URL(someFakeUrl);
SomeStory.parameters = {
mockData: [
{
url: someFakeUrl,
method: 'GET',
status: 200,
response: {
data: 'hello world',
},
},
],
};
// works
fetch(someFakeUrl).then((res) => {
// do something
});
// does not work
fetch(someFakeUrlObj).then((res) => {
// do something
});
In the case where the argument to fetch is someFakeUrl (a string), storybook-addon-mock will exhibit the expected behavior, i.e. the network request will be intercepted and the response will contain the mocked data.
In the case where the argument to fetch is someFakeUrlObj (an instance of URL), storybook-addon-mock will not attempt to intercept the request.
Please note that I observed this issue in an environment with a "real" domain, i.e. not localhost. It seemed like internally, storybook-addon-mock may be normalizing the URL provided to fetch to a localhost value, which is not correct behavior based on the construction described above using window.location.origin in a non-localhost environment.
@joejanuszk In the current version of this addon, it only supports string as an URL. We can take both string and URL objects as a parameter. I am considering this as a feature request.
The
fetch
API supports not only strings that represent URLs, but also objects with a stringifier that provides a URL. An instance of aURL
object is an example of such an object.Source: https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
However, I found that mocked requests do not work if the resource supplied to fetch is an instance of a
URL
object. For instance:In the case where the argument to
fetch
issomeFakeUrl
(a string),storybook-addon-mock
will exhibit the expected behavior, i.e. the network request will be intercepted and the response will contain the mocked data.In the case where the argument to
fetch
issomeFakeUrlObj
(an instance ofURL
),storybook-addon-mock
will not attempt to intercept the request.Please note that I observed this issue in an environment with a "real" domain, i.e. not
localhost
. It seemed like internally,storybook-addon-mock
may be normalizing the URL provided tofetch
to alocalhost
value, which is not correct behavior based on the construction described above usingwindow.location.origin
in a non-localhost environment.