React components testing with Jest & Enzyme

(Check datepicker popup open) DateInput.test.js

it('check DatePicker popup open', () => {  
    const DateComponent = mount(<DateInput />),
        dateInput = DateComponent.find("input[type='text']");
    dateInput.simulate('click');
    expect(DateComponent.find('.react-datepicker')).toHaveLength(1);
});

(Check default prop title) Spinner.test.js

it('check prop title by default', () => {  
    const SpinnerComponent = mount(<Spinner />);
    expect(SpinnerComponent.find('p').text()).toEqual('Please wait');
});

(Check if the value belongs to the moment class) valueToDate.test.js

const date = '21.11.2015',  
    format = 'DD.MM.YYYY';
it('check value is instanceof moment', () => {  
    const value = valueToDate(date, format);
    expect(value instanceof moment).toBeTruthy();
});

(Check if value is defined) valueToDate.test.js

const date = '21.11.2015',  
      format = 'DD.MM.YYYY';
it('render valueToDate utility with defined value', () => {  
    const value = valueToDate(date, format);
    expect(value).toEqual(moment(date, format));
});

(Check input component is wrapped in BaseFieldLayout) BaseFieldHOC.test.js

it('check input component is wrapped in BaseFieldLayout', () => {  
    expect(BaseFieldHOCComponent.props.className).toEqual('form-group');
});

(Check subTitle is not rendered) Spinner.test.js

it('check subTitle is not rendered', () => {  
    const SpinnerComponent = mount(<Spinner />);
    expect(SpinnerComponent.find('p').length).toEqual(1);
});

(Check text in subTitle prop renders correctly) Spinner.test.js

const props = {  
        subTitle: 'left 1 minute'
    },
    SpinnerComponent = mount(<Spinner {...props} />);

it('render correct text', () => {
    expect(SpinnerComponent.find('p').at(1).text()).toEqual(props.subTitle);
});

(Check the modal is closed) ModalTrigger.test.js

it('check the modal is closed', () => {  
   ModalTriggerComponent.instance().close();
   expect(ModalTriggerComponent.state().toggled).toBeFalsy();
});

(Check the modal is opened) ModalTrigger.test.js

it('check the modal is opened', () => {  
    const event = {
        preventDefault: () => {},
        stopPropagation: () => {}
    };
    ModalTriggerComponent.instance().open(event);
    expect(ModalTriggerComponent.state().toggled).toBeTruthy();
});

(Check valueToDate utility with empty value) valueToDate.test.js

const format = 'DD.MM.YYYY';
it('render valueToDate utility with empty value', () => {  
    const value = valueToDate('', format);
    expect(value).toEqual(null);
});

(Code listing for rawMarkup util) rawMarkup.js

export default function rawMarkup(template) {  
    return {__html: template};
}

(Create a snapshot of ModalWrapper.js with component) ModalWrapper.test.js

it('with component', () => {  
   const props = {
           component: () => {}
        },
        ModalWrapperComponent = shallow(<ModalWrapper {...props} />);
    expect(ModalWrapperComponent).toMatchSnapshot();
});

(Create a snapshot of ModalWrapper.js with default props (without component)) ModalWrapper.test.js

it('without component', () => {  
    const ModalWrapperComponent = shallow(<ModalWrapper />);
    expect(ModalWrapperComponent).toMatchSnapshot();
});

(Create HOC to pass defaultProps) BaseFieldLayout.test.js

import TestBaseFieldLayout from '../BaseFieldLayout';
const BaseFieldLayout = (props) => <TestBaseFieldLayout {...defaultProps} {...props} />;

(Create snapshot for BaseFieldHOC) BaseFieldHOC.test.js

it('render correctly component', () => {  
    expect(BaseFieldHOCComponent).toMatchSnapshot();
});

(Create snapshot for BaseFieldLayout component) BaseFieldLayout.test.js

it('render correctly BaseFieldLayout component', () => {  
    const BaseFieldLayoutComponent = renderer.create(<BaseFieldLayout />).toJSON();
    expect(BaseFieldLayoutComponent).toMatchSnapshot();
});

(Create snapshot for DateInput component) DateInput.test.js

it('render correctly date component', () => {  
    const DateInputComponent = renderer.create(<DateInput />).toJSON();
    expect(DateInputComponent).toMatchSnapshot();
});

(Create snapshot for ModalTrigger component) ModalTrigger.test.js

it('render ModalTrigger component correctly', () => {  
    const ModalTriggerComponent = shallow(<ModalTrigger><div /></ModalTrigger>);
    expect(ModalTriggerComponent).toMatchSnapshot();
});

(Create snapshot for spinner widget) Spinner.test.js

it('render correctly Spinner component', () => {  
   const SpinnerComponent = mount(<Spinner />);
   expect(SpinnerComponent).toMatchSnapshot();
});

(Create snapshot for TextInput components) TextInput.test.js

it('render correctly text component', () => {  
    const TextInputComponent = renderer.create(<TextInput />).toJSON();
    expect(TextInputComponent).toMatchSnapshot();
});

(createStore preparation) ModalTrigger.test.js

const store = createStore(() => ({}));

(defaultProps for DateInput component) DateInput.js

const defaultProps = {  
    inputClassName: 'input-custom',
    monthsShown: 1,
    dateFormat: 'DD.MM.YYYY',
    showMonthYearsDropdowns: false,
    minDate: moment()
};

(defaultProps preparation for testing BaseFieldLayout) BaseFieldLayout.test.js

const defaultProps = {  
   meta: {
        touched: null,
        error: null
    },
    input: {
        name: 'field-name'
    },
    inputComponent: () => { return 'test case'; }
}

(Ensure that fieldLink is null by default) BaseFieldLayout.test.js

it('check prop is null by default', () => {  
    const BaseFieldLayoutComponent = shallow(<BaseFieldLayout />);
    expect(BaseFieldLayoutComponent.props().fieldLink).toBe(null);
});

(Ensure that the icon prop is rendered correctly) BaseFieldLayout.test.js

it('render correctly icon prop', () => {  
    const props = {
            icon: <span className="icon-exclamation" />
        },
        BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />);
    expect(BaseFieldLayoutComponent.find('span').hasClass('icon-exclamation')).toBeTruthy();
});

(Ensure that tooltip content renders next to the label) BaseFieldLayout.test.js

const props = {  
        labelTooltipContent: 'tooltip for label'
    },
    BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />);

it('check prop is rendered', () => {
   expect(BaseFieldLayoutComponent.find('span').hasClass('tooltip-icon')).toBeTruthy();
});

(Ensure to have only one child (control element)) ModalTrigger.test.js

it('ensure to have only one child (control element)', () => {  
    expect(ModalTriggerComponent.findWhere(node => node.key() === 'modal-control').length).toEqual(1);
});

(HOC for DateInput.js which receives defaultProps) DateInput.test.js

import TestDateInput from '../DateInput';  
const DateInput = (props) =>  
    <TestDateInput
        {...defaultProps}
        {...props}
    />;

(Mock moment date) DateInput.test.js

const defaultProps = {  
    minDate: moment(0)
}

(Receiving correct show prop) ModalWrapper.test.js

it('check prop value', () => {
    const props = {
           show: true
       },
       ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal');
    expect(ModalWrapperComponent.props().show).toEqual(true);
});

(Receiving custom class name prop) ModalWrapper.test.js

it('render correct class name', () => {  
    const props = {
            modalClassName: 'custom-class-name'
        },
        ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal');
        expect(ModalWrapperComponent.hasClass('custom-class-name')).toEqual(true);
});

(Receiving custom title prop) ModalWrapper.test.js

it('render correct title', () => {  
    const props = {
           title: 'Modal Title'
       },
       ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('ModalTitle');
    expect(ModalWrapperComponent.props().children).toEqual('Modal Title');
});

(Render prop title correctly with HTML tags) Spinner.test.js

it('check prop title with html tags', () => {  
    const props = {
            title: '<b>Please wait</b>'
        },
        SpinnerComponent = mount(<Spinner {...props} />);
    expect(SpinnerComponent.find('p').text()).toEqual('Please wait');
});

(Set default moment time zone) DateInput.test.js

const moment = require.requireActual('moment-timezone').tz.setDefault('America/Los_Angeles')

(Snapshot example) TextInput.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render TextInput correctly component 1`] = `  
<input  
  className="input-custom"
  disabled={undefined}
  id={undefined}
  name={undefined}
  onBlur={undefined}
  onChange={[Function]}
  pattern={undefined}
  placeholder={undefined}
  readOnly={false}
  required={undefined}
  type="text"
  value={undefined}
/>
`;

(Test datepicker with null value) DateInput.test.js

it('render date input correctly with null value', () => {  
    const props = {
            value: null
        },
        DateInputComponent = mount(<DateInput {...props} />);
    expect((DateInputComponent).prop('value')).toEqual(null);
});

(Test onChange event) DateInput.test.js

it('check the onChange callback', () => {  
    const onChange = jest.fn(),
        props = {
            value: '20.01.2018',
            onChange
        },
        DateInputComponent = mount(<DateInput {...props} />).find('input');
    DateInputComponent.simulate('change', { target: {value: moment('2018-01-22')} });
    expect(onChange).toHaveBeenCalledWith('22.01.2018');
});

(Test proptypes for value, date expected to be string) DateInput.test.js

it('check the type of value', () => {  
    const props = {
            value: '10.03.2018'
        },
        DateInputComponent = mount(<DateInput {...props} />);
    expect(DateInputComponent.prop('value')).toBeString();
});

(Test showMonthYearsDropdowns prop, check datepicker month and years dropdowns displayed) DateInput.test.js

it('check month and years dropdowns displayed', () => {  
    const props = {
            showMonthYearsDropdowns: true
        },
        DateInputComponent = mount(<DateInput {...props} />).find('.datepicker');
    expect(DateInputComponent.hasClass('react-datepicker-hide-month')).toEqual(true);
});

(Testing errors) BaseFieldLayout.test.js

it('check if field has error', () => {  
    const props = {
            meta: {
                touched: true,
                error: 'This field is required'
            }
        },
        BaseFieldLayoutComponent = mount(<BaseFieldLayout {...props} />);
    expect(BaseFieldLayoutComponent.find('.error')).toHaveLength(1);
});

(Testing prop type for subTitle prop) Spinner.test.js

const props = {  
        subTitle: 'left 1 minute'
    },
    SpinnerComponent = mount(<Spinner {...props} />);

it('type for subTitle is string', () => {
    expect(SpinnerComponent.find('p').at(1).text()).toBeString();
});

(Testing prop type for title prop) Spinner.test.js

it('check prop type for title is string', () => {  
    const props = {
            title: 'Wait'
        },
        SpinnerComponent = mount(<Spinner {...props} />);
    expect(SpinnerComponent.find('p').text()).toBeString();
});

(Testing proptypes for children prop) ModalTrigger.test.js

const ModalTriggerComponent = mount(<ModalTrigger><div /></ModalTrigger>);
it('check children prop type', () => {  
      expect(ModalTriggerComponent.props().children).toBeObject();
});

(Testing proptypes for component prop) ModalWrapper.test.js

it('render correct component prop type', () => {  
   const props = {
           component: () => {}
       },
       ModalWrapperComponent = mount(<ModalWrapper {...props} />);
   expect(ModalWrapperComponent.props().component).toBeFunction();
});

(Testing proptypes for onHide prop) ModalWrapper.test.js

it('render correct onHide prop type', () => {  
    const props = {
            onHide: () => {}
        },
        ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal');
    expect(ModalWrapperComponent.props().onHide).toBeFunction();
});

(Testing proptypes for show prop) ModalWrapper.test.js

it('check prop type', () => {  
    const props = {
           show: true
        },
        ModalWrapperComponent = shallow(<ModalWrapper {...props} />).find('Modal');
    expect(ModalWrapperComponent.props().show).toBeBoolean();
});

BaseFieldHOC.test.js

let BaseFieldHOCComponent;
beforeEach(() => {  
    const TextInput = () => { return 'text input'; },
        BaseFieldHOCWrapper = BaseFieldHOC(TextInput),
        TextField = reduxForm({ form: 'testForm' })(BaseFieldHOCWrapper);
    BaseFieldHOCComponent = renderer.create(
        <Provider store={store}>
            <TextField name="text-input" />
        </Provider>
    ).toJSON();
});