Test fetch in storybook

Announcement.stories.js

import fetchMock from 'fetch-mock';
import {useState} from 'react';


export default {
  title: 'Components/Banner/Announcement',
  component: AnnouncementBanner,
  parameters: {
    chromatic: {
      // delay to make sure animation completes before chromatic takes snapshot
      delay: 3000,
    },
  },
};


export const Default = () => {
  fetchMock.reset();
  fetchMock.get('end:site/announcement', {
    status: 200,
    body: {
      data: 'hear ye, hear ye!',
    },
  }, {
    overwriteRoutes: true,
  });
  return <AnnouncementBanner />;
};


export const NoAnnouncement = () => {
  fetchMock.reset();
  fetchMock.get('end:site/announcement', 204);
  return (
    <>
      <AnnouncementBanner />
      <div className="storyControls">
        Nothing should appear when we get `204` response from API.
      </div>
    </>
  );
};


function AnnouncementBanner() {
  const [text, setText] = useState();

  fetch('http://test.com/site/announcement')
    .then((response) => {
      if (response.status === 204) {
        console.log('204');
        setText('');
      } else {
        response.json()
          .then((json) => {
            console.log('got response', json);
            setText(json.data);
          })
          .catch((err) => console.log('error parsing json', err));
      }
    })
    .catch((err) => console.log(err));

  console.log('--', text);
  if (!text) {
    return null;
  }

  return (
    <p>
      {text}
    </p>
  );
}