Jest Testing Examples

ColourAvatar.spec.tsx

import React from 'react';
import { Avatar } from 'antd';
import { shallow, ShallowWrapper } from 'enzyme';

import ColourAvatar from './ColourAvatar';

describe('ColourAvatar', () => {
  let wrapper: ShallowWrapper;

  const defaultProps: any = {
    firstName: 'Boom',
  };

  describe('when only first name is provided', () => {
    beforeEach(() => {
      wrapper = shallow(<ColourAvatar {...defaultProps} />);
    });

    it('should render Avatar', () => {
      expect(wrapper.find(Avatar)).toHaveLength(1);
    });

    it('should display first initial', () => {
      expect(wrapper.find(Avatar).render().text()).toEqual('B');
    });

    it('should have large Avatar size', () => {
      expect(wrapper.find(Avatar).prop('size')).toEqual('large');
    });

    it('should set background colour style', () => {
      expect(wrapper.find(Avatar).prop('style').backgroundColor).toHaveLength(7);
    });
  });

  describe('when last name is provided', () => {
    beforeEach(() => {
      wrapper = shallow(<ColourAvatar {...defaultProps} lastName="Shaka" />);
    });

    it('should render both initials', () => {
      expect(wrapper.find(Avatar).render().text()).toEqual('BS');
    });
  });

  describe('when the src attribute is provided', () => {
    beforeEach(() => {
      wrapper = shallow(<ColourAvatar {...defaultProps} src="http://jedigova" />);
    });

    it('should render both initials', () => {
      expect(wrapper.find(Avatar).prop('src')).toEqual('http://jedigova');
    });
  });
});