lundi 20 mai 2019

Testing avatar with Jest and Enzyme in React component

I have a react component that displays avatar coming after adding a member to the list. That avatar is an URL sent from backend and it comes from Google Auth.

In my Avatar component I have this image

 <img
          alt={`${member.displayName} avatar`}
          className="member-button__avatar"
          onClick={onDisplayDetails}
          onError={this.handleError}
          src={isAvatarError ? UserIconPlaceholder : member.avatarUrl}
          title={member.displayName}
        />

Image displays src coming from backend, or it displays image placeholder when error event occurs on IMG html tag ( if an URL is incorrect etc.)|

I wanted to test this component using Jest and Enzyme but don't know really how.

For now I have this test, that is passing when correct url is passed to the compoenent:

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);
  });
});

But I want to simulate somehow error event on image element to test if the src changes after an error occur. Is there a way to do so? Or maybe I'm doing this the wrong way?

Aucun commentaire:

Enregistrer un commentaire