TodoList 만들기

TodoList 는 여러 todo 객체가 들어있는 todos 배열을 props 로 받아와서 컴포넌트로 렌더링해줍니다.

우선 비어있는 컴포넌트를 먼저 만들어주세요.

TodoList.js

import React from 'react';

const TodoList = () => {
  return (
    <ul>

    </ul>
  );
};

export default TodoList;

이제 이 컴포넌트를 위한 테스트 코드를 작성해봅시다.

TodoList.test.js

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

describe('TodoList', () => {
  const sampleTodos = [
    {
      id: 1,
      text: 'TDD 배우기',
      done: true
    },
    {
      id: 2,
      text: 'react-testing-library 사용하기',
      done: false
    }
  ];

  it('renders correctly', () => {
    const { container } = render(<TodoList todos={sampleTodos} />);
    const items = container.querySelectorAll('li'); // li 태그로 조회
    expect(items.length).toBe(2); // 두개의 li 태그가 렌더링됨
  });
});

그 다음에는 위 테스트 케이스를 통과 시키기 위하여 컴포넌트에서 props 로 받아온 todos 배열을 map 을 통하여 컴포넌트로 렌더링해주겠습니다.

TodoList.js

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

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

export default TodoList;

간단하죠? 테스트 코드가 통과되었는지 확인하세요.

그 다음에는 이 컴포넌트에서 onRemove 와 onToggle 을 props 로 받아와서 그대로 TodoItem 컴포넌트들에게도 전달해주겠습니다. 이 작업을 위한 테스트 코드를 작성해봅시다.

TodoList.test.js

import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import TodoList from './TodoList';

describe('TodoList', () => {
  const sampleTodos = [
    {
      id: 1,
      text: 'TDD 배우기',
      done: true
    },
    {
      id: 2,
      text: 'react-testing-library 사용하기',
      done: false
    }
  ];

  it('renders correctly', () => {
    const { container } = render(<TodoList todos={sampleTodos} />);
    const items = container.querySelectorAll('li'); // li 태그로 조회
    expect(items.length).toBe(2); // 두개의 li 태그가 렌더링됨
  });

  it('calls onToggle and onRemove', () => {
    const onToggle = jest.fn();
    const onRemove = jest.fn();
    const { getByText } = render(
      <TodoList todos={sampleTodos} onToggle={onToggle} onRemove={onRemove} />
    );
    fireEvent.click(getByText('TDD 배우기')); // 텍스트 부분 클릭 (onToggle)
    fireEvent.click(getByText('삭제')); // 삭제 버튼 클릭 (onRemove)

    expect(onToggle).toBeCalled(); // 호출 됐어야 함
    expect(onRemove).toBeCalled(); // 호출 됐어야 함
  });
});

이 테스트 코드를 통과시키기 위해서 onToggle 과 onRemove 를 TodoItem 컴포넌트에게 그대로 전달시키세요.

TodoList.js

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

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

export default TodoList;

코드를 저장하고 방금 작성한 테스트 코드가 통과하는지 확인해보세요.