jest 및 react-testing-library를 사용하여 요소의 존재 여부를 어떻게 테스트합니까?

Question 1

Jest 및 react-testing-library를 사용하기위한 단위 테스트를 작성중인 구성 요소 라이브러리가 있습니다. 특정 소품이나 이벤트를 기반으로 특정 요소가 렌더링되지 않는지 확인하고 싶습니다.

getByText, getByTestId등 react-testing-library은 요소가 발견되지 않으면 오류 expect가 발생 하여 함수가 실행 되기 전에 테스트가 실패합니다 .

react-testing-library를 사용하여 jest에 존재하지 않는 것을 어떻게 테스트합니까?

Question 2

어설 션 요소가 없습니다.

표준 getBy메서드는 요소를 찾을 수 없을 때 오류를 발생시킵니다. 따라서 요소가 DOM에 존재 하지 않는다는 주장을하려면 queryBy대신 API를 사용할 수 있습니다 .
const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist
queryAll의 API 버전이 일치하는 노드의 배열을 반환합니다. 배열의 길이는 요소가 DOM에서 추가되거나 제거 된 후 어설 션에 유용 할 수 있습니다.
const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(2) // expect 2 elements
not.toBeInTheDocument

jest-dom유틸리티 라이브러리가 제공하는 .toBeInTheDocument()요소가 문서 또는하지의 몸에 있음을 주장하는 데 사용할 수있는 정규 표현을. 이것은 쿼리 결과를 주장하는 것보다 더 의미가있을 수 있습니다 null.
import '@testing-library/jest-dom/extend-expect'
// use `queryBy` to avoid throwing an error with `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()

Question 3

사용 queryBy/ queryAllBy.

당신이 말하는 것처럼, getBy*그리고getAllBy* 아무 것도 발견되지 않으면 오류가 발생.

그러나 동등한 방법 queryBy*및 queryAllBy*대신 반환 null또는 []:

queryBy

queryBy*쿼리는 쿼리에 대해 첫 번째 일치하는 노드를 반환하고 일치하는 null요소가 없으면 반환 합니다. 이것은 존재하지 않는 요소를 주장하는 데 유용합니다. 둘 이상의 일치 항목이 발견되면 throw됩니다 (대신 queryAllBy 사용).

queryAllBy queryAllBy* 쿼리는 쿼리에 대해 일치하는 모든 노드의 배열을 반환하고 일치하는 []요소가 없으면 빈 배열 ( )을 반환합니다 .

https://testing-library.com/docs/dom-testing-library/api-queries#queryby

그래서 특정 당신이 언급 한 두 가지를 위해 대신 사용하는 거라고 queryByText하고 queryByTestId있지만, 모든 쿼리에 대해 이러한 작업뿐 아니라 그 두.

Question 4

getByTestId 대신 queryByTestId를 사용해야합니다.

여기에 "car"ID가있는 구성 요소가 존재하지 않는지 테스트하려는 코드 예제가 있습니다.

 describe('And there is no car', () => {
  it('Should not display car mark', () => {
    const props = {
      ...defaultProps,
      base: null,
    }
    const { queryByTestId } = render(
      <IntlProvider locale="fr" messages={fr}>
        <CarContainer{...props} />
      </IntlProvider>,
    );
    expect(queryByTestId(/car/)).toBeNull();
  });
});

Question 5

getBy *는 요소를 찾을 수 없을 때 오류를 발생 시키므로이를 확인할 수 있습니다.

expect(() => getByText('your text')).toThrow('Unable to find an element');

Question 6

react-native-testing-library "getAllByType"을 사용한 다음 구성 요소가 null인지 확인할 수 있습니다. TestID를 설정할 필요가 없다는 장점이 있으며 타사 구성 요소에서도 작동해야합니다.

 it('should contain Customer component', () => {
    const component = render(<Details/>);
    const customerComponent = component.getAllByType(Customer);
    expect(customerComponent).not.toBeNull();
  });