У меня есть компонент реагирования, который отображает аватар после добавления участника в список.
Этот аватар является URL-адресом, отправленным из серверной части и полученным из Google Auth.
В моем компоненте Avatar у меня есть это изображение
<img
alt={`${member.displayName} avatar`}
className="member-button__avatar"
onClick={onDisplayDetails}
onError={this.handleError}
src={isAvatarError ? UserIconPlaceholder : member.avatarUrl}
title={member.displayName}
/>
На изображении отображается src из бэкэнда или заполнитель изображения, когда происходит событие ошибки в HTML-теге IMG (если URL неверен и т. Д.) |
Я хотел протестировать этот компонент, используя Jest и Enzyme, но не знаю, как на самом деле.
Пока у меня есть этот тест, который проходит, когда правильный URL передается компоненту:
import React from 'react';
import { shallow } from 'enzyme';
import MemberButton from './MemberButton';
describe('component should render avatar on success or placeholder image on error', () => {
const member = {
displayName: 'John Doe',
avatarUrl: 'http://test.pl/avatar.jpeg'
};
const memberButton = shallow(<MemberButton member={member} />);
let memberAvatar;
beforeEach(() => {
memberAvatar = memberButton.children().find('img');
});
it('should render correct avatar with given url', () => {
expect(memberAvatar.prop('src')).toBe(member.avatarUrl);
});
});
Но я хочу как-то смоделировать событие ошибки на элементе изображения, чтобы проверить, изменяется ли src после возникновения ошибки.
Есть ли способ сделать это?
Или, может быть, я делаю это неправильно?