택배 코드 리팩토링을 위한 TDD 도입기

Background

1. 배송 프로세스 개발 작업은 팀의 특정 두 분이 담당하셨고, 매우 복잡하다.

2. 외부 업체를 끼고 개발을 하기 때문에 배포 일정에 대한 압박이 있었고, 코드가 어느 순간 꼬이기 시작했다.

3. 두 분이 빠르게 개발을 하셨기 때문에 코드에 대한 공유가 잘 되지 않았다.

리팩토링을 제안하다…

어느 것부터 리팩토링해볼까?

// 배송지 추가
const submitDeliveryInfo = debounce(
    async (submitInfo: { [key: string]: string }) => {
      const checkState =
        addressTarget === 'receiver'
          ? {
              receiveUserName: submitInfo.receiveUserName,
              receiveUserPhoneNo: submitInfo.receiveUserPhoneNo,
              ...(!isHalfDelivery && {
                receiveUserAddress: submitInfo.receiveUserAddress,
              }),
              ...(isHalfDelivery && { shopName: submitInfo.shopName }),
            }
          : {
              ...inputAddress,
            };

      if (!checkAllStateIsReady(checkState)) {
        return;
      }

      if (
        isHalfDelivery &&
        ((submitInfo.shopAddress.startsWith('제주특별자치도') &&
          !senderSelectedAddress.deliveryAddress.startsWith(
            '제주특별자치도',
          )) ||
          (!submitInfo.shopAddress.startsWith('제주특별자치도') &&
            senderSelectedAddress.deliveryAddress.startsWith('제주특별자치도')))
      ) {
        openAlert({
          text: '제주 지역 접수 시 제주도 내 편의점으로만\n배송 가능합니다.(내륙 ↔ 제주 불가)',
          bottomText: '확인',
        });
        return;
      }

      if (addressTarget === 'receiver') {
        // 상태 업데이트
        setStoreInfo({
          shopCode: submitInfo.shopCode,
          shopName: submitInfo.shopName,
          shopAddress: submitInfo.shopAddress,
          shopPostNo: submitInfo.shopPostNo,
          shopTelNo: submitInfo.shopTelNo,
        });
        setReceiverAddress({
          receiveUserName: submitInfo.receiveUserName,
          receiveUserPhoneNo: submitInfo.receiveUserPhoneNo,
        });

        initialState.receiveUserName = '';
        initialState.receiveUserPhoneNo = '';
      }

      if (
        addressTarget !== 'receiver' &&
        pathname.includes('/address-regist') &&
        !isHalfDelivery
      ) {
        addAddress(inputAddress);
        return;
      }

      if (
        addressTarget !== 'receiver' &&
        pathname.includes('/address-edit') &&
        !isHalfDelivery &&
        inputAddress.deliverySeq
      ) {
        editAddress(inputAddress);
        return;
      }

      resetData();
      goBack();
    },
  );

1. 배송지 수정 관련 로직을 전부 제거한다.

2. 배송지 추가 페이지를 보내는 분, 받는 분 2개의 페이지로 분리한다.

리팩토링에 앞서.. 테스트 코드 없이는 너무 불안해..!

보내는 분 배송지 추가 시나리오

1. CU 알뜰택배 or 일반 편의점 택배 선택

2. 택배 신청 페이지로 진입

3. 보내는 분 > 변경 버튼 클릭

4. 배송지 관리 페이지 진입

5. 배송지 추가 버튼 클릭

6. 배송지 추가 페이지 진입

7. 배송지 추가

8. 배송지 관리 페이지에 추가된 배송지 확인

받는 분 배송지 추가 시나리오

1. CU 알뜰택배 or 일반 편의점 택배 선택

2. 택배 신청 페이지로 진입

3. 받는 분 > 배송지 추가 버튼 클릭

4. 배송지 추가 페이지 진입

5. 배송지 추가

6. 택배 신청 페이지에 받는 분 배송지 확인

테스트 코드 작성!

MemoryRouter

import { ReactElement, ReactNode } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { MemoryRouter } from 'react-router-dom';

import { RecoilRoot } from 'recoil';

import GlobalStyles from '@lib/styles/GlobalStyles';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      refetchOnReconnect: false,
      retry: false,
    },
  },
});

function Wrapper(
  { children }: { children: ReactNode },
  option?: { route: string },
): ReactElement {
  return (
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <GlobalStyles />
        <MemoryRouter initialEntries={[option?.route ?? '/']}>
          {children}
        </MemoryRouter>
      </QueryClientProvider>
    </RecoilRoot>
  );
}

export default Wrapper;

작성하기

const setup = () => {
  act(() => {
    render(
      <>
        <Route path="/cvs-regist/:type/:seq/:orderStatus?">
          <CvsDeliveryRegistPage />
        </Route>
        <Route path="/address-regist/receiver">
          <ReceiverAddressRegistPage />
        </Route>
      </>,
      {
        wrapper: (props) =>
          Wrapper(props as { children: ReactNode }, {
            route: '/cvs-regist/product/46998411',
          }),
      },
    );
  });
};

describe('편의점 택배 신청 페이지', () => {
  const portalRoot = document.createElement('div');
  portalRoot.setAttribute('id', 'popUpPortal');
  document.body.appendChild(portalRoot);
});

describe('편의점 택배 신청 페이지', () => {
  const portalRoot = document.createElement('div');
  portalRoot.setAttribute('id', 'popUpPortal');
  document.body.appendChild(portalRoot);

  // 매 테스트마다 CU 알뜰택배를 클릭하여 편의점 택배 신청 페이지로 이동한다.
  beforeEach(async () => {
    setup();

    await waitFor(() => {
      userEvent.click(screen.getByText('CU 알뜰택배'));
    });
  });

  test('CU 알뜰택배 신청 페이지로 이동한다.', async () => {
    await waitFor(() => {
      expect(screen.getByText('CU 알뜰택배 신청')).toBeVisible();
    });
  });
});

• fireEvent
• 이벤트를 발생시켜 컴포넌트의 상태 변화 및 렌더링을 테스트하는데 사용된다.

• userEvent
• fireEvent 보다 더 사용자가 실제로 사용하는 것처럼 이벤트를 발생시킨다. 클릭이 발생한다면 발생하기까지 발생하는 다른 이벤트들도 거치게 된다.

test('배송지 추가 버튼이 노출되어야 한다', async () => {
  const linkToRegist = screen.getByTestId('receiver_link_to_regist');

  expect(linkToRegist).toBeVisible();
  expect(linkToRegist).toHaveTextContent('배송지 추가');

  userEvent.click(linkToRegist);

  await waitFor(() => {
    expect(
      screen.getByText((content, element) => {
        return (
          content === '배송지 추가' &&
          element?.tagName.toLowerCase() === 'h1'
        );
      }),
    ).toBeVisible();
  });
});

const setup = (initialRoute = '/cvs-regist/product/46998411') => {
  act(() => {
    render(
      <>
        <Route path="/cvs-regist/:type/:seq/:orderStatus?">
          <CvsDeliveryRegistPage />
        </Route>
        <Route path="/address-regist/receiver">
          <ReceiverAddressRegistPage />
        </Route>
      </>,
      {
        wrapper: (props) =>
          Wrapper(props as { children: ReactNode }, {
            route: initialRoute,
          }),
      },
    );
  });
};

test('배송지 추가의 필드를 모두 입력하고, 완료 버튼을 누르면 신청 페이지에서 받는 분 정보가 세팅된다.', async () => {
  setUp('/address-register/receiver');
  const linkToRegist = screen.getByTestId('receiver_link_to_regist');
  userEvent.click(linkToRegist);

  // 이름, 휴대폰 번호 타이핑 이벤트
  const inputName = screen.getByTestId('receiver_input_name');
  const inputTel = screen.getByTestId('receiver_input_tel');
  const inputShop = screen.getByTestId('receiver_input_shop');

  await userEvent.type(inputName, '김테스트');
  await userEvent.type(inputTel, '01012345678');
  userEvent.click(inputShop);

  // 편의점 input 클릭 > 교대 검색 > 첫번째 점포 클릭
  const searchShopInput = screen.getByTestId('search_shop');
  await userEvent.type(searchShopInput, '교대');

  expect(searchShopInput).toHaveValue('교대');

  const shopItem = await screen.findByTestId('shop_list_1');
  expect(shopItem).toBeInTheDocument();

  userEvent.click(shopItem);

  // 배송지 추가 완료 버튼 클릭
  const submitButton = screen.getByTestId('receiver_address_submit');
  userEvent.click(submitButton);

  // 배송지 추가 후 받는 분 정보 세팅 체크
  await waitFor(() => {
    const receiverNameText = screen.getAllByTestId('receiver_info_text');
    expect(receiverNameText[0].textContent).toBe('김테스트');
    expect(receiverNameText[1].textContent).toBe('010-1234-5678');
    expect(receiverNameText[2].textContent).toBe('CU메트로교대점');
  });
});

 

References

초심자를 위한 React Testing Library

React Testing Library(이하 RTL)는 구현 기반의 테스트 도구인 Enzyme의 대안으로 자리 잡은 테스트 도구입니다. 따라서 RTL…

https://tecoble.techcourse.co.kr/post/2021-10-22-react-testing-library/

Testing Library | Testing Library

Simple and complete testing utilities that encourage good testing practices

https://testing-library.com/

react-testing-library 의 fireEvent 를 userEvent로 마이그레이션 하기 with Antd

이번 글에서는 사내 백오피스 서비스에 프론트엔드 테스트를 붙이고, 마이그레이션한 경험을 공유 드리고자 합니다.

https://medium.com/pinkfong/react-testing-library-의-fireevent-를-userevent로-마이그레이션-하기-with-antd-ad0de218bb98

홍승아 기술 블로그

홍승아 기술 블로그에 오신걸 환영합니다.

https://seungahhong.github.io/blog/2022/07/2022-07-24-jest/