🎄 성장일지 4.0

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

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

🌳 (1.0)키워드<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 (2.0)경험 위주로<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ (3.0)정해진 템플릿에 맞춰서<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성<br/> (3.1)230102부터 시작되는 학습에 관한 내용 추가<br/> (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!<br/> 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!<br/>

🔑 오늘의 학습 키워드

테스트 코드

테스트 코드는 왜 작성할까?

• 테스트 코드를 작성하면 개발자는 코드를 더욱 안전하게 리팩토링할 수 있다.
• 테스트 코드를 작성하면 개발자는 나중에 코드를 더욱 손쉽게 유지보수할 수 있다.
• 테스트 코드를 작성하면 개발자는 나중에 다른 사람이 만든 코드를 더욱 더 쉽게 이해할 수 있다.

위의 3가지 이유가 가장 대표적인 이유인 것 같다. 실제 현업에서는 시간 관계 상 테스트 코드를 작성하지 못하지만, 테스트 기반의 개발(TDD)을 도입하고 싶어하는 경우가 많다고 한다.(장기적으로 봤을 때는, 훨씬 더 득이 될테니..!)

사실 그동안 Jest를 통한 간단한 단위 테스트는 진행해보았다.(주로 util 함수들) 그렇다면 리액트는 어떻게 테스트 코드를 작성할까?

리액트 테스트 코드

오늘은 리액트 테스트 코드에 대해서 학습했다. 리액트는 주로 컴포넌트 단위(엄밀히는 함수 단위)에 대한 유닛 테스트를 진행한다.

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
    render(<App />);
    const linkElement = screen.getByText(/learn react/i);
    expect(linkElement).toBeInTheDocument();
});

test('welcom message2 by queryByText', () => {
  const {getByText, queryByText} = render( <App />);
  expect(queryByText(/welcome/i)).toBeInTheDocument();
});

또한, 어떤 태그의 이벤트를 발생시켜서 벌어지는 일에 대한 세부적인 테스트도 진행할 수 있다.

import {render, screen, fireEvent} from '@testing-library/react'

it('App.js: button을 click하면 새로운 데이터가 노출된다', () => {
    const {getByText} = render( <App />);
    fireEvent.click(getByText('loading data'))
    getByText('newdata');
})

그렇다면 비동기 데이터를 받아오고 이에 대한 테스트틀 하고싶을 땐 어떻게 해야할까?

import { render, screen, fireEvent, waitFor } from '@testing-library/react';


it('App.js: button을 click하면 1번 API 응답 데이터가 노출된다', async () => {
    //given
    // 'https://jsonplaceholder.typicode.com/todos/1' 요청 후 응답 데이터의 title 값이다.
    const title = "delectus aut autem";

    //when
    const {getByText} = render( <App />);
    fireEvent.click(getByText('loading data'))

    //then
    await waitFor(() => getByText(title));
})

좀더 자세한 테스트 코드 내용은 추후 더 배워보려 한다.(다음 프로젝트는 TDD로 해보기!)

📝 요약 및 하루 간단 회고

최근 슬럼프 때문에 개발 의욕이 조금 낮아졌었는데...! 오늘 다시 팍팍 생겼다!!! 나는 이 일이랑 잘 맞는 편인가보다!

오늘의 잘한 점

• 오늘 열심히 목표한만큼 구현해낸 점

오늘의 아쉬운 점

• 없음!

참고

• 코드스쿼드 학습 내용
• 리액트 테스트 코드 작성하기

undefined