medium

thing.spec.full.js

import React from 'react';
import PubSub from 'pubsub-js';

import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

import Thing from './thing';

describe('thing', () => {
  let component;

  beforeEach(() => {
    spyOn(PubSub, 'publish');
  });

  xdescribe('when the lifecycle events trigger', () => {
    it('will publish the correct message', () => {
      // we are ignoring componentWillMount() for now

      component = shallow(<Thing />);
      // rendering the component triggers componentDidMount()
      expect(PubSub.publish).toHaveBeenCalledWith('thing.did.mount');

      // updating the props triggers:
      // componentWillReceiveProps()
      // shouldComponentUpdate()
      // componentWillUpdate()
      component.setProps({});
      expect(PubSub.publish).toHaveBeenCalledWith('thing.will.receive.props');
      expect(PubSub.publish).toHaveBeenCalledWith('thing.should.update');
      expect(PubSub.publish).toHaveBeenCalledWith('thing.will.update');

      // when the component unmounts it triggers componentWillUnmount()
      component.unmount();
      expect(PubSub.publish).toHaveBeenCalledWith('thing.will.unmount');
    });
  });

  xdescribe('when the props change', () => {
    it('will publish the correct messages based on the prop', () => {
      // lets give the component a 'value' prop
      component = shallow(<Thing value={3} />);

      // lets update the component with the same prop
      component.setProps({ value: 3 });
      expect(PubSub.publish).lastCalledWith('thing.will.receive.props');
      // shouldComponentUpdate will return false
      // so componentWillUpdate() will not call
      expect(PubSub.publish).not.toHaveBeenCalledWith('thing.should.update');
      expect(PubSub.publish).not.toHaveBeenCalledWith('thing.will.update');
    });
  });

  describe('when the state changes', () => {
    it('it renders correctly', () => {
      component = shallow(<Thing value={3} />);
      expect(component.find('h1').text()).toEqual('The value is 3');

      // lets alter the state
      component.setState({ message: 'You have a value of' });
      expect(component.find('h1').text()).toEqual('You have a value of 3');
    });
  });
});