Next.JS + Storybook 에서 getServerSideProps() 테스트

이전 Storybook 설정하기에서 대부분 다 했는데 👇

2022.06.10 - [Next.js] - Next.js에 StoryBook 설정하기!

Next.js에 StoryBook 설정하기!

아직 server side props는 설정하지 않았어. getServerSideProps 사용하면 서버에서 컴포넌트의 props를 준비하는데 ui 툴인 스토리북에서 될리가 없지. 그렇다고 그냥 놔두면 완벽한 기능 테스트가 안되고 팀원간에 miscommunication이 발생하게 되겠지! 그러니까 설정! 하자구! ㅋ

지난 번에 기본 index.tsx를 스토리북에 넣었잖아. 이제 getServerSideProps를 넣어서 살짝 업데이트 해보자구. 👇

//index.tsx
export const getServerSideProps = async () => {
  const res = await fetch("http://localhost:3000/api/hello");
  const data = await res.json();
  if (!data) {
    return {
      notFound: true,
    };
  }
  return {
    props: data,
  };
};

const Home: NextPage<{ name: string }> = ({ name }) => {
...
	Welcome to <a href="https://nextjs.org">Next.js! {name}</a>
...

index.tsx에 getServerSideProps을 추가하고 server 에서 얻은 name을 Home 컴포넌트에 보이도록 해놨어. 이제 next.js 에  http://localhost:3000/api/hello 에서 얻어온 John Doe가 보일거여!

John Doe가 보인다.

그런데 스토리북에는 변화가 없지. 왜냐하면 아까도 설명했듯이 ui 툴인 스토리북이 next.js의 server-side props를 수행할 리가 없거든. 그래도 getServerSideProps() 을 수행한 것 같은 기능을 넣어줘야 디자이너나 다른 팀원들이 해당 컴포넌트를 잘 평가할 수 있겠지? 이걸하려면 home.stories.tsx를 약간 변경해줘야 해. 👇

import { ComponentStory } from "@storybook/react";
import Home from "../../pages/index";

export default {
  title: "Pages/Home",
  component: Home,
};

export const HomePage: ComponentStory<typeof Home> = (args) => (
  <Home {...args} />
);
HomePage.args = { name: "John Doe" }; //default args

<Home> 컴포넌트에 args를 넘겨주도록 변경하고 Homepage.args = {name:"John Doe"} 이렇게 기본값을 전달해주면 돼. 이렇게 하고 나면 스토리북에서 name을 변경시킬 수 있는데 디자이너나 다른 팀원들이 getServerSideProps을 한 것처럼 평가/테스트 할 수 있는 거지. 으음~ 하면 할수록 스토리북 넘나 좋은 듯.

이렇게 getServerSideProps 테스트할 수 있음ㅋ

---

여기까지가 스토리북 공식 유튜브에서 추천하는 방식인데 MSW로 테스트하는 방법을 하나 더 소개하고 있어. MSW는 mocking service worker라는 툴인데 테스트를 목적으로 진짜 서버가 데이터를 주는 것처럼 속이는 거지. 우리의 경우에는 스토리북을 속여야 하는 거고 ㅋㅋ

https://mswjs.io/

Mock Service Worker

스토리북에서 추천하는 방식이 아니지만 알아두면 여러모로 도움이 될 것 같아서 진행 고고! 우선 설치 👇

yarn add msw --dev

그리고 public 폴더를 넣어서 msw 초기화 -> 그러면 public 폴더에 mockServiceWorker.js 파일이 생성돼.

npx msw init public/ --save

mockServiceWorker.js 파일 생성

 

스토리북의 preview.js에 가서 service worker를 생성해야 해. 가짜 rest api를 만들고 동작시키는 거지.👇

import { setupWorker, rest } from "msw";

if (typeof global.process === "undefined") {//checks to make sure that this is not a node process
  const worker = setupWorker(//create service worker
    rest.get("http://localhost:3000/api/hello", (req, res, ctx) => {//Define the rest api requrest
      return res(ctx.json({ name: "John Doe" }));// and its response
    })
  );
  worker.start();// worker starts!
}

이제 스토리북에서 http://localhost:3000/api/hello 에 request하면 msw가 {name:"John Doe"}를 리턴하겠지. 그럼 home.stories.tsx에서 getserversideprops를 진짜로 수행하는 것처럼 만들어 보자구!👇👇👇

import { ComponentStory } from "@storybook/react";
import Home, { getServerSideProps } from "../../pages/index";

export default {
  title: "Pages/Home",
  component: Home,
};

export const HomePage: ComponentStory<typeof Home> = (
  args,
  { loaded: { name } }
) => <Home {...args} name={name} />;
HomePage.args = { name: "Peter" }; //default args
HomePage.loaders = [
  async () => {
    let data = await getServerSideProps();//excute getServerSideProps()!!!
    return data.props;//and return its response (msw will response!!)
  },
];

 

getServerSideProps은 원래 서버에서 수행하는 건데 뭐 상관없지. 사실 getServerSideProps()은 export async functions에 불과하니까 import해서 사용하면 next.js 서버사이드에서 수행하는 거랑 다름없어. 세상엔 참 머리 좋은 사람들이 많어 ㅋㅋ 이제 끝!

이렇게 하고 스토리북 보면 default args가 "Peter"임에도 불구하고 John Doe를 보이고 있지.

MSW running!

preview.js에 가서 msw response를 John Doe에서 다른 걸로 변경해봐. 그럼 스토리북에서도 변경될거야. 매우 흐믓하군!! 하지만!

공식 유튜브에서는 args를 이용하는 걸 추천하고 msw는 추천하는 방식이 아니라고 해! 왜? 나도 몰라! 말 안해주더라고 ㅋ

하지만 msw는 next.js + 스토리북 조합이 아니더라도 다른 테스트에 매우 유용하게 사용할 수 있을 것 같네. ㅎㅎ 이런게 있다는 걸 아는 것만으로도 많이 배운겨 ㅎㅎㅎㅎ 기뻐하자구!