🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

⚛️ 키워드: 직관적이고 쉽고 간단하게 작성

Cypress

• E2E 테스트를 위한 라이브러리.
• Jest와는 달리 Cypress는 브라우저에서 동작한다.
• 보통 유저의 행동을 테스트하기 위해 사용한다.

오늘 jest와 RTL로 각 컴포넌트 단위의 테스트 코드를 작성하고 Cypress로 간단한 유저의 행동 양식에 맞는 E2E 테스트 코드를 작성했다. Cypress 자체가 브라우저 UI 단에서 실제 유저의 액션을 보여준다는 점에서는 좋지만, jest와 RTL 만으로도 간단한 유저 행동은 테스팅할 수 있는 것 같아서 Cypress의 효율성에 대해서는 의문이 든다.

Test 코드 양식

멘토님께서 가르쳐주신 대로 테스트 코드마다 setup 함수를 두고서 코드를 작성하니, 훨씬 간결하고 깔끔해진다. 아래는 오늘 작성한 Chips 컴포넌트에 대한 테스트 코드이다.

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

import { Chips } from '.';
import { ThemeProvider } from 'styled-components';
import { theme } from '../../../styles/theme.styled';

describe('Chips', () => {
  it('should render Chips component', () => {
    const { chips } = setup();

    expect(chips).toBeInTheDocument();
  });
});

describe('Chip', () => {
  it('should render Chip component', () => {
    const { chipList } = setup();
    const firstChip = chipList[0];

    expect(firstChip).toBeInTheDocument();
  });

  it('should render Chip components as many as the number of data', () => {
    const { chipList } = setup();

    expect(chipList.length).toBe(mockData.length);
  });

  it('should event handler be called when click Chip component', () => {
    const { chipList } = setup();
    const firstChip = chipList[0];
    const mockOnClick = jest.fn();
    firstChip.onclick = mockOnClick;
    userEvent.click(firstChip);

    expect(mockOnClick).toHaveBeenCalled();
  });
});

const setup = () => {
  const { container } = render(
    <Chips>
      {mockData.map((data) => (
        <Chips.Chip key={data.id}>{data.name}</Chips.Chip>
      ))}
    </Chips>,
    {
      wrapper: ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>,
    },
  );

  const chips = container.querySelector('section');
  const chipList = screen.getAllByRole('button');

  return {
    chips,
    chipList,
  };
};

const mockData = [
  {
    id: '0',
    name: 'test-0',
  },
  {
    id: '1',
    name: 'test-1',
  },
];

📝 회고

아고 오늘은 빠르게 미션 정리하고 넥스트 강의도 듣고 싶었는데, 생각보다 미션 정리하는데 시간이 오래 걸렸다. 좀더 빠릿하게(지금보다 더..?) 움직여야지!!!

참고

undefined