[코드숨] 리액트 13기 -3강/React-Testing(과제 1: To-do 테스트 작성하기)-review 반영

전에 제출한 App.test.jsx

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

import App from './App';

describe('App', () => {
  const renderApp = () => render((<App />));

  it('App 컴포넌트 랜더링이 된다', () => {
    const { container } = renderApp();

    expect(container).toHaveTextContent(/To-do/);
    expect(container).toHaveTextContent(/할 일이 없어요!/);
    expect(container).toHaveTextContent(/추가/);
  });

  context('할 일이 있을 경우', () => {
    it('"완료"버튼이 랜더링된다', () => {
      const { getByLabelText, getByText, container } = renderApp();

      const input = getByLabelText('할 일');

      fireEvent.change(input, {
        target: {
          value: '독서',
        },
      });

      const addTaskBtn = getByText('추가');

      fireEvent.click(addTaskBtn);

      expect(container).toHaveTextContent('독서');

      const deleteBtn = getByText('완료');

      fireEvent.click(deleteBtn);

      expect(container).not.toHaveTextContent('독서');
    });
  });

  context('할 일이 없을 경우', () => {
    it('할 일이 없어요! 글씨가 뜬다.', () => {
      const tasks = [];
      const { getByText } = renderApp(tasks);

      expect(getByText('할 일이 없어요!')).not.toBeNull();
    });

    it('value가 입력되면 "추가" 버튼이 랜더링 된다', () => {
      const { getByLabelText, getByText, container } = renderApp();
      const input = getByLabelText('할 일');

      fireEvent.change(input, {
        target: {
          value: '할 일 추가',
        },
      });

      const addTaskBtn = getByText('추가');

      fireEvent.click(addTaskBtn);

      expect(container).toHaveTextContent('할 일 추가');
    });
  });
});

 

삭제만 되어도 독서가 있다 없어진 걸 알 수 있으니까 삭제

 

 

>중복되는 코드는 함수로 선언해주어 사용함

 

>const로 render 작성한 코드를 전부 function으로 통일 시킴

const 와 function 참고

 // const renderApp = () => render((<App />));

  function renderApp() {
    return render((<App />));
  }

 

>tasks.js 파일 만들어서

const tasks = [
  { id: 1, title: '넷플릭스 보기' },
  { id: 2, title: '카페 가기' },
];

export default tasks;

>사용하는 파일에서 import 해서 사용하기