How to test default props functions is attached to component or not ? | React | Jest | Enzyme

Question

How can we write the test to check defaultProps function in this case ( handleChange: () => {},handleBlur: () => {},handleSubmit: () => {}) attached to dom and they are working correctly?

I know we can test function when we pass as props but looking for help to test default functions. Thanks,

import React from 'react';
import PropTypes from 'prop-types';

const LoginForm = ({
  handleChange,
  handleBlur,
  handleSubmit,
}) => (
  <form onSubmit={handleSubmit}>
    <input
      onChange={handleChange}
      onBlur={handleBlur}
    />
    <input
      onChange={handleChange}
      onBlur={handleBlur}
    />
    <button type="submit">
      Submit
    </button>
  </form>
);

const shape = { email: '', password: '', generic: '' };

LoginForm.propTypes = {
  handleChange: PropTypes.func,
  handleBlur: PropTypes.func,
  handleSubmit: PropTypes.func,
};

LoginForm.defaultProps = {
  handleChange: () => {},
  handleBlur: () => {},
  handleSubmit: () => {},
};

export default LoginForm;

Answer 1

If you want to test that the functions have the expected behavior, you can access them as static properties on the LoginForm, and write your tests around that.

import LoginForm from 'wherever'

test('should have default handleChange', () => {
   expect(LoginForm.defaultProps.handleChange).toBeDefined();
});

test('something something', () => {
    const result = LoginForm.defaultProps.handleChange();
    expect(result).toBe('something');
});

If you want to test that React does what it says it does -- ie, that it will pass the default props in if no other props are specified -- i recommend you don't. The creators of react have written tests around that.

Answer 2

You can access the props using mount and .props() from enzyme.

import LoginForm from '../somelocation'
import { mount } from 'enzyme'

it('should handleChange when value 'foo' is passed', () => {
   const props = mount(<LoginForm />).props()
   const handleChange = props.handleChange
   expect(handleChange('foo')).to.equal('bar')
 }

the const defaultProps should give you

props = {
   handleChange: () => {},
   handleBlur: () => {},
   handleSubmit: () => {}
}

Answer 3

Hope this helps.

The answer posted by @Daniel Varela is good but could be more clear. Here is how I solved this issue.

I used just what he suggested mount and .props but the difference is that I wanted to test if some properties and functions were previously defined.

// React & Libraries
import React from 'react';    
import { expect } from 'chai';
import { mount } from 'enzyme';
// Features
import ModalConfirmation from './modalConfirmation';

describe('ModalConfirmation', () => {

const wrapper = mount(<ModalConfirmation />);

it('should have default props', () => {
    const props = wrapper.props();
    expect(props).not.be.equal(null);
    expect(props.data).to.deep.equal({});
    expect(props.onCancel).to.not.throw();
    expect(props.onConfirm).to.not.throw();
    expect(props.cancelButtonText.length).be.greaterThan(0);
    expect(props.confirmButtonText.length).be.greaterThan(0);
    expect(props.confirmationMessage).be.equal(null);
});

});