React 테스트 라이브러리 — 내 노트

일반적인 RTL 관련 질문에 대한 몇 가지 빠른 답변입니다.

테스트 실행

얀 런 테스트

테스트는 보통 어디에 두나요?

테스트 폴더 내부.

테스트 이름을 지정하는 일반적인 방법은 무엇입니까?

Component.test.tsx

테스트 파일을 가져오려면 일반적으로 무엇이 필요합니까?

import React from “react”; //React
import Counter from “../Counter”; //The component to test
import { render } from “@testing-library/react”;

render는 가상 돔에서 구성 요소를 렌더링하는 데 사용되므로 렌더링된 내용을 테스트할 수 있습니다. 이로 인해 일반적으로 beforeEach 내부로 들어갑니다.

기본 테스트의 예는 무엇입니까?

test(“header renders with correct test”, () => {
     const { getByTestId } = render(<Counter />);
     const headerEl = getByTestId(“header”);
     expect(headerEl.textContent).toBe(“My Counter”);
})

테스트의 첫 번째 인수는 설명입니다.

두 번째 인수는 테스트 작업이 포함된 함수입니다.

expect는 실제로 테스트를 수행하는 함수입니다.

getByTestId를 사용하는 것은 좋지 않습니다. 이것은 단지 예일 뿐입니다.

RTL 테스트에 대한 일반적인 설명은 무엇입니까?

구성 요소를 렌더링합니다.

그런 다음 구성 요소 내부의 요소를 보고 선택합니다.

그런 다음 다음을 수행할 수 있습니다.

요소에서 작업(예: 클릭)을 실행한 다음 예상 결과를 확인합니다.

또는 이전에 작업을 실행하지 않고 올바른 값을 갖도록 요소를 확인하십시오.

요소에서 올바른 값을 확인하는 예는 무엇입니까?

'headerEl' 요소 내부의 텍스트 내용이 특정 문자열 "My Counter"일 ​​것으로 예상합니다.

expect(headerEl.textContent).toBe(“My Counter”);

원하는 요소를 선택할 방법을 찾을 수 없다면 사용할 수 있는 마지막 리소스는 무엇입니까?

getByTestId 및 요소는 다음 속성으로 표시되어야 합니다.

data-testid

동작 시뮬레이션에 유용한 것은 무엇입니까?

가장 많이 사용되는 방법은 userEvent입니다(사용자와 더 유사하기 때문).

import userEvent from ‘@testing-library/user-event’; 
userEvent.dblClick(checkbox);

그러나 fireEvent도 사용할 수 있습니다.

fireEvent.change(inputEl, {
     target: {
          value: “5”
     }
});

특정 가치가 없는 것을 기대한다면 어떻게 해야 할까요?

아닙니다.

expect(headerEl.textContent).not.toBe("내 카운터");
터미널에서 코드를 출력하는 방법은 무엇입니까?

screen.debug()

그게 다야!