리액트 테스트코드 - list , header

list 컴포넌트 : 

   테스트항목 :

      get 요청을 통해 받아온 Todo데이터를 랜더링하고있는지

 

      완료하기/취소하기 버튼을 눌렀을때 _changeTodo API에 정확한 인자를 전달하는지

 

 

 

 

우선 list 컴포넌트의 get 요청을 처리하기위해 get 요청결과를 임시로만들어서 테스트 진행했습니다

 

describe("listComponent", () => {
  it("get API를 통해 받아온 데이터 랜더링 확인", async () => {
    //path가 running 일때 받아올 더미데이터입니다
    const responseData = [
      {
        id: "1",
        title: "Dummy Task 1",
        detail: "Sample detail",
        state: false,
        startDate: "2023-10-30",
        endDate: "2023-10-30",
      },
      {
        id: "2",
        title: "Dummy Task 2",
        detail: "Sample detail",
        state: false,
        startDate: "2023-10-30",
        endDate: "2023-10-30",
      },
    ];
    //path가 running 일때 GET요청 결과 목업
    mockAxios.onGet(`${BASE_URL}/todos/running`).reply(200, responseData);

    const { container } = render(
      <MemoryRouter>
        <Contents path="total" />
      </MemoryRouter>
    );

    await waitFor(() => {
      // 데이터가 렌더링되었는지 확인합니다.
      expect(container).toHaveTextContent("Dummy Task 1");
      expect(container).toHaveTextContent("Dummy Task 2");
    });
  });

 

 

 

 

그 다음 완료하기버튼을 눌렀을 때 _changeTodo함수 호출에 정확한 인자가 전달되는지 테스트 했습니다

 

mock get API는 위의테스트에서 동작을 했기에 아래코드가 적용이되어있습니다     

mockAxios.onGet(`${BASE_URL}/todos/running`).reply(200, responseData);

 

 it("완료하기 버튼 눌렀을 때", async () => {
    const mockChangeTodo = jest.spyOn(todosApi, "_changeTodo");

    render(
      <MemoryRouter>
        <Contents path="total" />
      </MemoryRouter>
    );

    await waitFor(async () => {
      //완료하기 버튼이 랜더링 되었는지 확인합니다
      const completeButtons = screen.getAllByText("완료하기");
      // 더미데이터가 2개의 객체라 첫 객체의 버튼을 지정
      const targetButton = completeButtons[0]; 
      fireEvent.click(targetButton);
    });

    // mockChangeTodo 호출에 제대로 된 값이 들어갔는지 확인
    expect(mockChangeTodo).toHaveBeenCalledWith(
      {
        id: "1",
        title: "Dummy Task 1",
        detail: "Sample detail",
        state: false,
        startDate: "2023-10-30",
        endDate: "2023-10-30",
      },
      true
    );
  });

 

 

 

 

그 다음 취소하기버튼을 눌렀을 때 _changeTodo함수 호출에 정확한 인자가 전달되는지 테스트 했습니다

 

  it("취소하기 버튼 눌렀을 때", async () => {
    //path가 done일때 받아오는 더미데이터입니다
    const responseData2 = [
      {
        id: "1",
        title: "Dummy Task 1",
        detail: "Sample detail",
        state: true,
        startDate: "2023-10-30",
        endDate: "2023-10-30",
      },
      {
        id: "2",
        title: "Dummy Task 2",
        detail: "Sample detail",
        state: true,
        startDate: "2023-10-30",
        endDate: "2023-10-30",
      },
    ];

    //path가 done 일때 GET요청 결과 목업
    mockAxios.onGet(`${BASE_URL}/todos/done`).reply(200, responseData2);

    const mockChangeTodo = jest.spyOn(todosApi, "_changeTodo");

    render(
      <MemoryRouter>
        <Contents path="done" />
      </MemoryRouter>
    );

    await waitFor(async () => {
      //취소하기 버튼이 랜더링되었는지 확인합니다
      const completeButtons = screen.getAllByText("취소하기");
      // 첫 번째 버튼 선택
      const targetButton = completeButtons[0]; 
      fireEvent.click(targetButton);
    });

    // mockChangeTodo 호출에 제대로 된 값이 들어갔는지 확인
    expect(mockChangeTodo).toHaveBeenCalledWith(
      {
        id: "1",
        title: "Dummy Task 1",
        detail: "Sample detail",
        state: true,
        startDate: "2023-10-30",
        endDate: "2023-10-30",
      },
      false
    );
  });

 

 

header 컴포넌트 :

  테스트 항목 :

      각 헤더에 보여줘야할 '홈' , '투두 작성' , '투두 전체' , '로그인'이 포함되었는지

  

 it('Header_render', () => {
    const { container } = render(
      <MemoryRouter> {/* MemoryRouter로 감싸기 */}
        <Header />
      </MemoryRouter>
    );
    
    // header에 각 메뉴가 있는지 확인
    expect(container).toHaveTextContent('홈');
    expect(container).toHaveTextContent('투두 작성');
    expect(container).toHaveTextContent('투두 전체');
    expect(container).toHaveTextContent('로그인');
  });

 

 

 

이렇게 테스트를 진행해봤는데 추가적으로 테스트해야하는 부분이나 

수정해야하는 사항을 공부해서 추가해보겠습니다