생소한걸 학습할때, 처음부터 복잡한 생각보단 개념부터 가볍게 접근하자
이번주의 주제는 테스트 코드 작성이였다.
항상 기능개발에 집중하고 테스트 코드 작성을 해볼 기회가 없었다보니,
생소하게 느껴졌고 크게 과제를 풀면서 잘 흡수하지 못한 것 같다.
틈틈히 테스트 코드 작성을 연습할 필요를 느꼈고
이번에 배운 내용을 더 찾아보며 확실하게 정리해야겠다!
* Point
무엇을 어떻게 해야 할까 싶을 땐 테스트 대상을 사용하면
이런 결과가 나온다부터 시작해 보세요.
복잡한 것 보다는 단순하고 쉬운 것 부터 시작해 보세요.
그 후에 만약에 이러한 경우라면?
만약 ~ 이 없다면 테스트를 추가하여 점진적으로 만들어 보세요.
처음에는 통과하지 못할(RED) 테스트를 작성하고,
이 테스트를 통과하게끔(Green) 코드를 작성하고,
결과 코드를 최대한 깔끔하게 리팩터링 하는 짧은 주기로 반복
When : 구체화하고자 하는 그 행동
( List컴포넌트를 렌더하면 )
Then : 어떤 특정한 행동 때문에 발생할거라고 예상되는 변화에 대한 설명
( 할 일 목록이 렌더링 된다 )
npm i -D jest @types/jest babel-jest
npm i -D @testing-library/react @testing-library/jest-dom
npm i -D jest-plugin-context
리액트 테스트 코드 작성 시 바깥쪽 컴포넌트 부터 순차적으로
컴포넌트의 역할을 파악한 후 알맞는 테스트 코드 작성
( 상태관리의 역할인지, 통합의 역할인지... )
describe - context - it 분리 처리
위와 같은 계층 구조로 작성했을때,
npx jest --wachAll --verbose 테스트 결과를 문서의 방식으로 확인이 가능하다.
관련 Methods Doc
https://runebook.dev/ko/docs/jest/expect#expectassertionsnumber
할일 목록을 보여주는 컴포넌트에 대한 테스트 코드 작성
작성 전 해당 컴포넌트의 상황과 기능을 먼저 나열하고 작성
1) 상황 : 목록이 존재함 / 목록이 존재하지 않음
2) 기능 : 목록 출력 / 단일 행 삭제
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import List from './List';
// * 리스트 컴포넌트에 대한 Test
describe('List', () => {
// * jest에서 제공해주는 예시 함수
const handleClickDelete = jest.fn();
// * 상황, 기능별 반복되는 렌더 수행 함수화 (리펙터링 단계에 작성)
function renderList(tasks) {
return render((
<List
tasks={tasks}
onClickDelete={handleClickDelete}
/>
));
}
// * context 계층-상황 (목록이 존재하는 상황)
context('with tasks', () => {
const tasks = [
{ id: 1, title: 'Task-1' },
{ id: 2, title: 'Task-2' },
];
// * it 계층-기능 (목록 출력 기능 확인)
it('renders tasks', () => {
const { getByText } = renderList(tasks);
expect(getByText(/Task-1/)).not.toBeNull();
expect(getByText(/Task-2/)).not.toBeNull();
});
// * it 계층-기능 (데이터 삭제 기능 확인)
it('renders "완료" button to delete a task', () => {
const { getAllByText } = renderList(tasks);
// * 키워드가 중복되는 다수의 Element는 getAllByText 사용
const buttons = getAllByText('완료');
fireEvent.click(buttons[0]);
expect(handleClickDelete).toBeCalledWith(1);
});
});
// * context 계층-상황 (목록이 존재하지 않는 상황)
context('without tasks', () => {
it('renders no task message', () => {
const { getByText } = renderList([]);
expect(getByText(/할 일이 없어요!/)).not.toBeNull();
});
});
});
References
https://marocchino.net/2016/12/04/about-rspec/
https://ko.javascript.info/testing-mocha#ref-888
지금 마음가짐을 유지하고 끝까지 최선을 다해서 성장하길!🔥