Как вы проверяете отсутствие элемента с помощью библиотеки jest и react-testing-library?

У меня есть библиотека компонентов, в которой я пишу модульные тесты для использования Jest и react-testing-library. На основе определенных свойств или событий я хочу убедиться, что определенные элементы не отображаются.

getByText, getByTestIdи т. д. выдают ошибку, react-testing-libraryесли элемент не найден, что приводит к сбою теста до срабатывания expectфункции.

Как вы тестируете что-то не существующее в шутке с помощью библиотеки react-testing-library?

Из DOM Testing-library Docs - Appearance and Disappearance

Утверждающие элементы отсутствуют

Стандартные getByметоды бросают ошибку , когда они не могут найти элемент, так что если вы хотите , чтобы сделать утверждение , что элемент не присутствует в DOM, вы можете использовать queryByAPI , вместо того, чтобы :

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

Версия queryAllAPI возвращает массив совпадающих узлов. Длина массива может быть полезна для утверждений после добавления или удаления элементов из 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()

Используйте queryBy/ queryAllBy.

Как вы говорите, getBy*и getAllBy*выкидывают ошибку, если ничего не найдено.

Однако, эквивалентные методы queryBy*и queryAllBy*вместо того, чтобы вернуть nullили []:

queryBy

queryBy*запросы возвращают первый совпадающий узел для запроса и возвращают, nullесли ни один элемент не соответствует. Это полезно для утверждения элемента, которого нет. Это срабатывает, если найдено более одного совпадения (вместо этого используйте queryAllBy).

queryAllBy*Запросы queryAllBy возвращают массив всех совпадающих узлов для запроса и возвращают пустой массив ( []), если ни один элемент не соответствует.

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

Итак, для конкретных двух, которые вы упомянули, вы бы вместо этого использовали queryByTextи queryByTestId, но они работают для всех запросов, а не только для этих двух.

Вы должны использовать queryByTestId вместо getByTestId.

Вот пример кода, в котором я хочу проверить, не существует ли компонента с идентификатором «автомобиль».

 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();
  });
});

getBy * выдает ошибку, когда не находит элементы, поэтому вы можете проверить это

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

Вы можете использовать react-native-testing-library "getAllByType", а затем проверить, является ли компонент нулевым. Имеет то преимущество, что не нужно устанавливать TestID, также должен работать со сторонними компонентами

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