В библиотеке реагирующего тестирования, как проверить, что дочерний компонент отображается?

Question

В энзиме вы можете проверить наличие дочернего компонента следующим образом:

expect(wrapper.find(ChildComponent)).toHaveLength(1)

Что эквивалентно этому тесту в библиотеке реагирующего тестирования? Все онлайн-примеры, которые я нахожу, охватывают очень простые тесты с поиском элементов dom - ни один из них не содержит примеров того, как визуализировать дочерние компоненты. Как вы находите дочерний компонент?

Answer 1

Вы не должны проверять, отображается ли ваш дочерний компонент или нет, потому что он тестирует детали реализации, что библиотека не рекомендует вам делать.

вы можете проверить, отображается ли какой-либо текст из вашего дочернего компонента или вы можете передать data-test-id элементу-оболочке child, а затем использовать .toBeInTheDocument из @ testin-library / jest-dom

expect(queryByText(/some text/i).toBeInTheDocument();

or

expect(queryByTestId('your-test-id').toBeInTheDocument();

Answer 2

с момента query* возврат null если элемент не найден, вы можете просто

expect(queryByTestId('test-id-you-provided')).toEqual(null);
expect(queryByTestId('some-other-test-id-you-provided')).not.toEqual(null);

также getBy* бросать, если элемент не найден , Так что следующий тоже должен работать

getByTestId('test-id-you-provided');