MSW를 활용한 Clean UI Integration Test

import { mocked } from 'ts-jest/utils';
import { getPostsHook } from './hooks'

jest.mock('./hooks');
const mockedGetPostsHook = mocked(getPostsHook);

it('유저는 자신이 작성한 Post의 리스트를 볼 수 있다', () => {
  mockedGetPostsHook.mockReturnValueOnce(Promise.revolve([
    { title: 'a', ... },
    { title: 'b', ... },
  ]));

  render(Component)

  const items = await screen.findByRole('listitem');

  expect(items.length).toBe(2);
});

// __mocks__/hooks.js
const POSTS = [{ title: 'a' }, { title: 'b' }]

export const getPostsHook = () => {
  return Promise.resolve(POSTS)
}

jest.mock('./hooks')

it('유저는 자신이 작성한 Post의 리스트를 볼 수 있다', () => {
  render(Component)

  const items = await screen.findByRole('listitem')

  expect(items.length).toBe(2)
})

// schema.js
import { factory, primaryKey } from '@mswjs/data'

export const schema = {
  post: {
    id: primaryKey(String),
    title: String,
  },
}

// seed.js
export const runMigration1 = db => {
  db.post.create({ id: '1', title: 'Hello' })
  db.post.create({ id: '2', title: 'Bye' })
}

// db.js
import { factory } from '@mswjs/data'
import { migration1 } from './seed'
import schema from './schema'

const db = factory(schema)
runMigration1(db)

export default db

// server.js
import { rest } from 'msw'
import { setupServer } from 'msw/node'
import db from './db'

// setupServer의 인자로 들어간 handler도 파일을 분리할 수 있지만
// 편의를 위해 한곳에 작성했습니다.
export const server = setupServer(
  rest.get('/posts', (req, res, ctx) => {
    const posts = db.post.getAll()
    return res(ctx.json(posts))
  })
)

/* setupTest.js */
import { server } from './server'

// 테스트 전에 모든 요청을 intercept하는 layer 생성
beforeAll(() => server.listen())

// 요청 interception layer를 제거하여 side effect 차단
afterAll(() => server.close())

/* 테스트 파일 */
test('Post 데이터를 렌더링 한다', () => {
  render(Component)

  const items = await screen.findByRole('listitem');

  expect(items.length).toBe(2);
})

// schema.js
import { manyOf, nullable, oneOf, primaryKey } from '@mswjs/data';

export const schema = {
  user: {
    id: primaryKey(String),
    name: String,
    posts: manyOf('post')
  },
  post: {
    id: primaryKey(String),
    title: String,
  },
}

// seed.js
export const runMigration = () => {
  const posts = [
    db.post.create({ id: '1', title: 'Hello' })
    db.post.create({ id: '2', title: 'Bye' })
  ]

  db.user.create({ id: '1', name: 'has-posts', posts })
  db.user.create({ id: '2', name: 'no-posts', posts: [] })
}

// session.js
// 프로젝트 별로 세션관리는 상이하며, 이에따라 구현은 달라질 수 있습니다
import crypto from 'crypto';

let sessionStorage = {};

export function getAuthToken(request) {
  return request.headers.get('authorization')?.split(' ')[1];
}

export function getSessionUser(request) {
  const token = getAuthToken(request);
  return sessionStorage[token];
}

export function setSessionUser(user) {
  const token = crypto.randomBytes(16).toString('hex');
  sessionStorage[token] = user;
  return token;
}

export function clearSession() {
  sessionStorage = {};
}

// handlers.js
export const handlers = [
  rest.post("/login", (req, res, ctx) => {
    const { login } = req.variables;

    const user = db.account.findFirst({
      where: { id: { equals: login } },
    });

    const token = setSessionUser(user);

    return res(ctx.json({ token, user }));
  }),

  rest.get("/posts", (req, res, ctx) => {
    const user = getSessionUser(req);
	  return res(ctx.json({ posts: user.posts }))
  }),

  rest.get("/posts/:postId", (req, res, ctx) => {
    const { postId } = req.params
    const user = getSessionUser(req);
    const post = user.posts.findOne({
      where: {
        id: {
          equals: postId
        }
      }
    });

	  return res(ctx.json({ post }))
  }),
]

function LoginRoot({ children, login }) {
  const loggedIn = useLogin(login)

  if (loggedIn) {
    return <Suspense fallback="Loading...">{children}</Suspense>
  }

  return null
}

function renderWithLogin(component, login) {
  return render(<LoginRoot login={login}>{component}</LoginRoot>)
}

test('Post를 작성한 유저는 모든 Post를 볼 수 있고 클릭하면 포스트 내용을 볼 수 있다.', () => {
  renderWithLogin(Component, 'has-posts');

  const items = await screen.findByRole('listitem');

  expect(items.length).toBe(2);

  await userEvent.click(items[0]);

  expect(window.location.pathname).toBe('/posts/1');

  const title = getByRole('heading', { level: 1 });

  expect(title.textContent).toBe('Hello');
})

test('Post를 작성하지 않은 유저는 `글쓰기` 버튼을 노출한다. 버튼을 클릭하면 글쓰기 페이지로 이동한다', () => {
  renderWithLogin(Component, 'no-posts');

  const button = await screen.findByRole('button', { name: '글쓰기' });

  expect(button).toBeInDocument();

  await userEvent.click(button);

  expect(window.location.pathname).toBe('/posts/new')
})