`request.body` is being `null` when custom `response` function used

[vinujan59]

Scenario

Fetch API call is being executed via rtk query, where the body is passed as FormData

I can observe the fetch function being executed and faker.js mockFetch as well. But the request.body is null

The argument for real fetch look like this before triggering Faker.mockFetch

Any idea on this behaviour?

[nutboltu]

@vinujan59 did you use the custom function to return a FormData?

[vinujan59]

@nutboltu, thank you for the quick reply. My use case is, I am trying to mock an API that consumes FormData. In the custom function, I am trying to consume the formData and come up with a response.

[nutboltu]

@vinujan59 what are the return object in your custom function? Can you provide a code snippet or any reproducible code sample?

[Sjeiti]

Not sure if this is the same issue but I've setup a simple example here https://github.com/Sjeiti/storybook-addon-mock-post-body-issue

The app has a button for a GET and a POST. Pressing it will log the request data in the CLI running ExpressJS.

Served through Angular CLI the request body contains a value.

Served through Storybook the request body is empty.

We use Storybook for development, documentation and testing. The plugin storybook-addon-mock is only appended to the exported decorators when used in documentation. But the import itself causes an empty body in development and testing as well (since XMLHttpRequest is overwritten with LocalMockXhr regardless).

Hopefully this can easily be fixed or worked around.

gr

Ron

ps: One thing to note is that for Storybook the request headers are Accept: */* and Content-type: text/plain; charset=UTF-8. These should be Accept: application/json, text/plain, */* and Content-type: application/json. (related to #71 ?)

[nutboltu]

This issue is fixed in version 4.3.0.

Relevant PR: https://github.com/linearlabs-workspace/storybook-addon-mock/pull/193

[w3nda]

For anyone that can't update to SBv7 and still uses storybook-addon-mock v2, here's how I solved it (temp fix until we get on SBv7)

I keep the addon-mock registration globally, and add withMock as global decorator. For stories that do not need the mock addon I added the following decorator

const useRealFetchers = () => {
  useEffect(() => {
    if (global.realFetch && global.realXMLHttpRequest) {
      // save for later
      global.fakeFetch = global.fetch;
      global.fakeXMLHttpRequest = global.XMLHttpRequest;

      // use real fetchers that are saved by addon mock
      global.fetch = global.realFetch;
      global.XMLHttpRequest = global.realXMLHttpRequest;
    }

    return () => {
      // for other stories, restore fake fetchers
      if (global.fakeFetch && global.fakeXMLHttpRequest) {
        global.fetch = global.fakeFetch;
        global.XMLHttpRequest = global.fakeXMLHttpRequest;
      }
    };
  }, []);

  return null;
};

export default {
  title: 'Component',
  component: Component,
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (storyFn) => {
      useRealFetchers();

      return <>{storyFn()}</>;
    },
  ],
};