Jest + React Testing Library로 테스트 코드 실전 적용하기

BinaryWoo_dev·2023년 3월 16일
0

리액트 테스트

목록 보기
4/5

최근에 회사에서 기존 화면에 부분적으로 추가 UI를 개발하다가 문득 최근에 공부했던 jest 라이브러리 테스팅 방법을 적용해보기로 헀다.

테스트 코드 작성하기

위에는 개발할 UI 화면의 디자인 시안이며, '설비 정보' Input UI 가 추가될 예정이었다.
따라서, 정적 UI 측면에서 봤을 때 내가 테스트 할 사항은 크게 2가지였다.

  • '설비 정보' form UI 렌더링 여부 테스트
  • 설비 정보의 '대분류', '중분류' Select UI의 초기값 테스트
import { describe, expect, it } from '@jest/globals';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import React from 'react';
import '../../../__mocks__/reactMock';
import AddFacility from '@components/Maintenance/Dialog/Facility/Add';

describe('설비 생성 Dialog', () => {
  const props = {
    t: () => {},
  };

  it('Test ==> rendering for "설비 정보" Input UI', () => {
    render(<AddFacility {...props} />);
    const facilityInfo = screen.getByTestId('facility-type');
    const largeClass = screen.getByTestId('largeClassType');
    const mediumClass = screen.getByTestId('mediumClassType');
    expect(facilityInfo).toBeInDocument; // 설비 정보 form UI
    expect(largeClass).toBeInDocument; // 대분류 선택 UI
    expect(mediumClass).toBeInDocument; // 중분류 선택 UI
  });

  it('Test ==> set initialValue for "설비 정보" Input UI', () => {
    render(<AddFacility {...props} />);
    const largeClassType = screen.getByTestId('largeClassType');
    const mediumClass = screen.getByTestId('mediumClassType');

    expect(largeClassType.textContent).toBe('대분류'); // placeholder === '대분류' 
    expect(mediumClass.textContent).toBe('중분류'); // placeholder === '중분류'

  });
});

테스트 코드를 위와 같이 작성한 후, $yarn jest test 명령어로 테스트를 시작하였더니 아래와 같은 결과가 도출되었다.

뿌-듯- ☺️
현재 회사에서는 따로 테스팅 프로세스가 존재하지 않아 개발자가 직접 UI들을 만져보며 테스팅해왔다.
그래서 예전부터 테스팅 라이브러리를 한 번 제대로 사용해보고 싶었는데, 이번 기회를 통해 테스팅 라이브러리를 어떻게 사용하면 되는지 감을 조금 잡은 것 같다.
앞으로 중대규모의 프로젝트 개발 시, 잘 활용해봐야겠다.

초록색의 Test Passed 결과가 나올 때 너무 짜릿하단 말이지

profile
매일 0.1%씩 성장하는 Junior Web Front-end Developer 💻🔥

0개의 댓글