Тестирование аватара с компонентом Jest и Enzyme in React - PullRequest
0 голосов
/ 20 мая 2019

У меня есть компонент реагирования, который отображает аватар после добавления участника в список. Этот аватар является 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 после возникновения ошибки. Есть ли способ сделать это? Или, может быть, я делаю это неправильно?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...