React - Jest

아주대학교 링크인턴을 진행하면서

회사의 레거쉬 코드들, 심지어 컴포넌트 분리도 되어있지 않고, 비즈니스로직또한 한바닥으로 UI와 700줄의 코드들을 리펙토링을 진행하게되었고

리펙토링을 진행하면서
jest를 사용하여 비즈니스로직에 사용되는 함수들을 테스트 하기로 하였다.

export const sort = (key) => (idx) => key.filter(({value}) =>value == idx)[0]?.key;
export const examSortRefFilterFn = value => ({parentIdx}) => parentIdx == value;
export const examSortFilterFn = value => ({examSort}) => examSort === value;
export const examSortMapFn = ({examName,examIdx}) => ({ key: examName, text: examName, value: examIdx })

export const getData = (value,list) => getListSortKey(value,list)
export const getListSortKey = (value,list) => sort(list)(value)
export const handleSearchData = value => prev => ({ ...prev, search: value });
export const handleSubjectData = value => prev => ({ ...prev, examName: value, search: "" })
export const handleExamSortData = value => prev => ({ ...prev,  examSort: Number(value) ?? ""  })
export const handleExamSortRefData = value => prev => ({ ...prev, examSortRef: Number(value) ?? "" })
export 	const handleSort = ({data,total1,total2,setter,callback,callback2}) => data === '전체' 
  ? setter(total1) 
  : setter([
      { key: "전체", text: "전체", value: '' },
      ...total2
      .filter(callback)
      .map(callback2)
    ]);

와 같이 코드를 작성하였다.

나름 커링도 사용해보고 싶었고, 코드를 깔끔하게 한 두줄로 정리하고 싶다보니 이렇게 되었는데 이것이 과연 좋은 코드 일까? 라는 생각이 든다.

jest

아쉽게도 내가 인턴으로 근무하는 회사에 사수가 없다. 그냥 나혼자 개발하고, 나혼자 학습할 내용을 찾아보게되어 많이 아쉽지만, jest를 도입하여 코드를 테스트해보려고 하였다.

describe("dataManagement Util Fn test", () => {
  test("sort Fn Test", () => {
    expect(sort([])(3)).toEqual(undefined);
    expect(sort(keyData)(3)).toEqual(3);
  });
  test("examSortRefFilterFn Fn Test", () => {
    expect(examSortRefFilterFn(3)({ parentIdx: 3 })).toEqual(true);
    expect(examSortRefFilterFn(3)({ parentIdx: 4 })).toEqual(false);
  });
  test("examSortFilterFn Fn Test", () => {
    expect(examSortFilterFn(3)({ examSort: 3 })).toEqual(true);
    expect(examSortFilterFn(3)({ examSort: 4 })).toEqual(false);
  });
  
  ...
  
  test("handleSort Fn Test1", () => {
    const data = "전체";
    const total1 = [];
    const total2 = [];
    const setter = jest.fn();
    const callback = jest.fn();
    const callback2 = jest.fn();
    expect(
      handleSort({ data, total1, total2, setter, callback, callback2 })
    ).toEqual(undefined);
  });
});

위와 같이 jest를 통하여 테스트 코드를 작성하였고, msw를 사용하여 api 요청또한 테스트를 진행하였다.

다음은 cypress를 통한 e2e테스트를 학습하여 적용해보려한다.