Как тестировать изображения в React

React-testing-library нам не помогает. Но ванильный JavaScript дает нам все, что нам нужно!

Ситуация:

В моем приложении для реагирования я хочу проверить, отображается ли правильное изображение.

Осложнение:

Библиотека React-testing не предоставляет никаких инструментов для подтверждения источника изображения.

Решение:

Ванильный JavaScript!

Например:

Представьте себе компонент, который отображает результат теста ScoreDisplayer. Если получен проходной балл, скажем, выше 60%, то отображается счастливое лицо (`Face-smile.svg`). В противном случае отображается грустное лицо (`Face-sad.svg`).

Код может выглядеть примерно так:

И приведет к следующему компоненту:

Итак, как мы можем проверить это с помощью библиотеки react-testing-library?

Как мы протестируем этот код? Используя react-testing-library, мы можем использовать findByAltText:

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

Как может помочь ванильный JavaScript?

Альтернативное решение - использовать querySelector, предоставленный ванильным JavaScript. Будет найден первый соответствующий HTMLElement. Мы можем делать утверждения по любому аспекту этого элемента, включая источник.

Там! Теперь мы непосредственно проверили то, что хотим протестировать!

На заметку:

document.querySelector() возвращает общий HTMLElement. Поскольку нам известен конкретный тип, который мы ожидаем, мы можем использовать as HTMLImageElement, чтобы получить соответствующие подсказки типа.
Я все еще использую render() из библиотеки react-testing-library, чтобы добавить компонент в документ. Возможно, есть и другие способы сделать это.
Я не уверен, поощряется ли такой подход или является стандартом в сообществе React. Все, что я знаю, это то, что для меня это имеет смысл. Остальные мысли приветствуются в комментариях!