Тестирование `img.onLoad` /` img.onError` с использованием библиотеки Jest и React Testing - PullRequest
Новая
       16

Тестирование `img.onLoad` /` img.onError` с использованием библиотеки Jest и React Testing

1 голос
/ 02 марта 2020

Наша команда столкнулась со сценарием сегодня днем ​​при написании теста React Testing Library (RTL) с Jest для нашего <Avatar /> компонента. В частности, мы хотели проверить, что тег <img /> был удален из DOM, когда он не загружается (запускается onError), чтобы соответствовать ожидаемому окончательному виду компонента. По какой-то причине использование fireEvent в элементе <img /> DOM не было для нас сразу очевидным, и мы не нашли это явное решение в Интернете, поэтому мы хотели поделиться. Как вы можете себе представить, это будет работать и для других событий, таких как onLoad. Подробнее о RTL Events . 

it('should render with only initials when avatar image is NOT found', async() => {
  const { container } = render(<Avatar {...defaultMocks} />);
  const avatarImg = container.querySelector('img');

  expect(avatarImg).toBeInTheDocument();

  fireEvent(avatarImg, new Event('error'));

  expect(avatarImg).not.toBeInTheDocument();
});

1 Ответ

1 голос
/ 02 марта 2020

Пояснение

  • <Avatar /> визуализируется с использованием реквизитов по умолчанию и в нашем случае содержит тег <img />, указывающий на необязательную конечную точку изображения профиля для пользователя.
  • Затем мы используем fireEvent для этого элемента DOM, вызывая функцию onError, которая была связана в render время, имитируя неудачный / 404 случай, когда аватар пользователя не был установлен.
  • Наконец, мы можем теперь ожидаем, что <img /> был удален на основе логики c в <Avatar />
...