testing-styled-components-jest-enzyme.js

import React from 'react';
import 'jest-styled-components';
import { ThemeProvider } from 'styled-components';
import renderer from 'react-test-renderer';
import { mount } from 'enzyme';
import SubmitBlock from '../SubmitBlock';
import { fashionTradeTheme as theme } from '../../../../constants/theme';

describe('snapshots', () => {
  describe('it should render the compoent', () => {
    const tree = renderer.create(<ThemeProvider theme={theme}>
      <SubmitBlock submittingLabel="Submit" />
    </ThemeProvider>).toJSON();
    expect(tree).toMatchSnapshot();
  });

  describe('it should reder cancel button', () => {
    const tree = renderer.create(<ThemeProvider theme={theme}>
      <SubmitBlock cancelLabel="Cancel" />
    </ThemeProvider>).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

describe('SubmitBlock Component', () => {
  const props = {
    submitting: false,
    submitLabel: 'Save',
    submittingLabel: 'Saving',
    cancelLabel: 'Cancel',
    hasCancel: true,
    theme: {}
  };

  it('should render with at least save button', () => {
    const component = <ThemeProvider theme={theme}><SubmitBlock {...props} /></ThemeProvider>;
    const wrapper = mount(component);
    const submitButton = wrapper.find('button[type="submit"]');
    expect(submitButton.text()).toContain('Save');
  });

  it('should render at least a submit button', () => {
    const component = <ThemeProvider theme={theme}><SubmitBlock {...props} /></ThemeProvider>;
    const wrapper = mount(component);
    const submitBtn = wrapper.find('button[type="button"]');
    expect(submitBtn.text()).toBe('Cancel');
  });

  it('should render two buttons', () => {
    const component = (
      <ThemeProvider
        theme={theme}
      >
        <SubmitBlock {...props} />
      </ThemeProvider>
    );
    const wrapper = mount(component);
    const buttons = wrapper.find('button');
    expect(buttons.length).toEqual(2);
  });

  it('should hide the cancel button when the passed prop is false', () => {
    const component = (
      <ThemeProvider
        theme={theme}
      >
        <SubmitBlock {...props} hasCancel={false} />
      </ThemeProvider>);
    const wrapper = mount(component);
    const buttons = wrapper.find('button').length;
    expect(buttons).toEqual(1);
  });

  it('should cancel action when cancel button is clicked', () => {
    const onCancelMock = jest.fn();
    const component = (
      <ThemeProvider
        theme={theme}
      >
        <SubmitBlock {...props} onCancel={onCancelMock} />
      </ThemeProvider>);
    const wrapper = mount(component);
    wrapper.find('button[type="button"]').simulate('click');
    expect(onCancelMock).toHaveBeenCalled();
  });

  it('should hande submit action when the submit button is clicked', () => {
    const submitMock = jest.fn();
    const component = (
      <ThemeProvider theme={theme}>
        <SubmitBlock {...props} onSubmit={submitMock} />
      </ThemeProvider>);
    const wrapper = mount(component);
    wrapper.find('button[type="submit"]').simulate('click');
    expect(submitMock).toHaveBeenCalled();
  });

  it('should change label when the props change', () => {
    const component = <ThemeProvider theme={theme}><SubmitBlock /></ThemeProvider>;
    const wrapper = mount(component);
    wrapper.setProps({ submitLabel: 'Submitting...' });
    expect(wrapper.contains('Submitting...'));
  });
});