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

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

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

Ответы (8)

Из Документы библиотеки тестирования DOM - появление и исчезновение

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

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

const submitButton = screen.queryByText ('отправить')
ожидать (submitButton) .toBeNull () // его не существует

Версия queryAll API возвращает массив совпадающих узлов. Длина массив может быть полезен для утверждений после добавления или удаления элементов из ДОМ.

const submitButtons = screen.queryAllByText ('отправить')
ожидать (submitButtons) .toHaveLength (2) // ожидать 2 элемента

not.toBeInTheDocument

Библиотека утилит jest-dom предоставляет .toBeInTheDocument () сопоставитель, который может использоваться для подтверждения того, что элемент является в теле документа или нет. Это может быть более значимым, чем утверждение результат запроса: null.

import '@ testing-library / jest-dom / extend-expect'
// используем `queryBy`, чтобы не выдавать ошибку с` getBy`
const submitButton = screen.queryByText ('отправить')
ожидать (submitButton) .not.toBeInTheDocument ()

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

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

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

У меня отработано (если хотите использовать getByTestId):

expect(() => getByTestId('time-label')).toThrow()

Используйте 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, но они работают для всех запросов, а не только для этих двух.

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

expect(submitButton).not.toBeNull() // it exist

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

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

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

expect (() => getByText ('ваш текст')). ToThrow ('Невозможно найти элемент');

Другое решение: вы также можете использовать try / catch блок

ожидаемые утверждения (1)
пытаться {
    // если элемент найден, следующее ожидание не пройдёт тест
    ожидать (getByTestId ('ваш-тест-идентификатор')). not.toBeVisible ();
} catch (ошибка) {
    // в противном случае ожидание выдаст, а следующее ожидание пройдет проверку
    ожидать (правда) .toBeTruthy ();
}

2022 WebDevInsider