[react]4️⃣ TDD 방법으로 todolist-TodoItemList

TodoItemList 만들기

복수의 TodoItem 렌더링하기

이번 작업에서는 따로 UI 구성이 필요가 없다.
그저 TodoItem에서 만들어진 항목들을 나열해주기만 하면 되기 때문에
<ul>을 사용해서 틀을 만들어 준 뒤
TodoItem을 여러개 렌더링해주는 것에 대한 테스트케이스를 만든다.

TodoItemList.test.js

import React from 'react';
import TodoItemList from './TodoItemList';
import { render } from 'react-testing-library';

describe('<TodoItemList />', () => {
  // 임의적으로 todo배열에 데이터를 넣어서 테스트를 함
  const sampleTodos = [
    {
      id: 1,
      text: 'TDD 배우기',
      done: true
    },
    {
      id: 2,
      text: 'react-testing-library 사용하기',
      done: true
    }
  ];

  //TodoItem 컴포넌트가 렌더링 되는지 확인
  it('renders todos properly', () => {
    const { getByText } = render(<TodoItemList todos={sampleTodos} />);
    getByText(sampleTodos[0].text);
    getByText(sampleTodos[1].text);
  });
});

다음으로는 이 테스트가 통과될 수 있는 코드를 작성해준다.

TodoItemList.js

import React from 'react';
import TodoItem from './TodoItem';

const TodoItemList = ({ todos }) => {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem todo={todo} key={todo.id} />
      ))}
    </ul>
  );
};

export default TodoItemList;

테스트가 통과되었다면, 다음으로는 TodoItem에 전달해 줄 props인
onToggle, onRemove함수가 잘 호출되고 있는지 테스트를 해준다.

TodoItemList.test.js

it('calls onToggle and onRemove', () => {
    const onToggle = jest.fn();
    const onRemove = jest.fn();
    const { getByText, getAllByText } = render(
      <TodoItemList 
      	todos={sampleTodos} 
   	onToggle={onToggle} 
	onRemove={onRemove} 
	/>
    );

    fireEvent.click(getByText(sampleTodos[0].text));
    expect(onToggle).toBeCalledWith(sampleTodos[0].id);

    fireEvent.click(getAllByText('삭제')[0]); // 첫번째 삭제 버튼을 클릭
    expect(onRemove).toBeCalledWith(sampleTodos[0].id);
  });

마지막으로 테스트 케이스를 통과시키는 코드를 작성하면 끝!

TodoItemList.js

import React from 'react';
import TodoItem from './TodoItem';

const TodoItemList = ({ todos, onToggle, onRemove }) => {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem 
       	 todo={todo} 
    	 key={todo.id} 
	 onToggle={onToggle}
	 onRemove={onRemove}
	/>
      ))}
    </ul>
  );
};

export default TodoItemList;

이제 마지막으로 지금까지 만든 컴포넌트들을 품고 있는
TodoApp 컴포넌트 작업을 해보자!