Jest Enzyme - тест на видимость компонента для пользователя

#jestjs #enzyme

Вопрос:

В настоящее время мы используем это, чтобы проверить, был ли компонент отрисован:

 
const someComponent = component.find('[data-test="some-component"]').at(0);
expect(someComponent.length).toBe(1);

Это нормально, но на самом деле это не проверка того, что компонент виден пользователю — это просто проверка того, что компонент существует. Как проверить, что компонент одновременно существует и виден пользователю?

1. я не совсем понял, что вы подразумеваете под существованием, если компонент визуализирован, он будет существовать для пользователя, если только не установлен флаг, скрывающий компонент, в этом случае вам нужно переключить флаг в ваших тестах и посмотреть, отображается ли ваш компонент после него или нет

Ответ №1:

Проверьте https://github.com/testing-library/jest-dom который предлагает множество пользовательских DOM-сопоставителей для Jest, в том числе toBeVisible() .

С его помощью вы могли бы написать подобный тест, который должен работать:

 const someComponent = component.find('[data-test="some-component"]').at(0);
expect(someComponent.getDOMNode()).toBeVisible();

Редактировать: хотя в заголовке поста OP написано «Jest Enzyme», я должен уточнить, что getDomNode() это функция Enzyme, поэтому вышеуказанное не сработает, если вы используете только Jest. Вот страница документации по использованию Enzyme с Jest.

1. Ошибка типа: ожидать(…).toBeVisible не является функцией

2. @SimonLong вы импортировали @testing-library/jest-dom в файл настройки тестов? Смотрите github.com/testing-library/jest-dom#usage для получения инструкций.

3. Здесь я получаю TypeError: .getDOMNode не является функцией

4. @VictorCarvalho это ферментативная функция ( enzymejs.github.io/enzyme/docs/api/ReactWrapper/getDOMNode.html ) — мой ответ предполагал, что Enzyme настроен, поскольку в теме исходного вопроса указано «Jest Enzyme», но я обновлю свой ответ, чтобы прояснить это для всех, кто еще сюда приходит!

5. у меня почему-то это не работает. Полученный элемент не виден (элемента нет в документе): <span class=»абсолютное право-6 bg-white» data-testid=»test-selectedCount» />