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

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

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

Как вы тестируете что-то, что не существует в шутке, используя библиотеку реагирования-тестирования?

Ответ 1

Из документации DOM Testing-library - Внешний вид и исчезновение

Что если я хочу убедиться, что элемент НЕ существует?

Обычно вы получаете доступ к отображаемым элементам с помощью утилиты getByTestId. Однако эта функция выдаст ошибку, если элемент не найден. Если вы хотите специально проверить отсутствие элемента, вам следует использовать утилиту queryByTestId, которая вернет элемент, если он найден, или ноль, если нет.
expect(queryByTestId('thing-that-does-not-exist')).toBeNull()

Ответ 2

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

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

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

Ответ 3

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

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