How to test an onChange input event with enzyme and jest

Question

I'm trying to test an onChange event of my component using enzyme and jest. TextFieldWrapper.jsx:

import React from "react";
import PropTypes from "prop-types";
import TextField from "@material-ui/core/TextField";

const TextFieldWrapper = ({
  label,
  type,
  input,
  meta: { touched, error },
  multiline,
  fullWidth,
  required
}) => {
  return (
    <div>
      <TextField
        required={required}
        label={label}
        error={!!(touched && error)}
        margin="normal"
        multiline={multiline}
        rows={4}
        type={type}
        value={input.value}
        onChange={input.onChange}
        variant="outlined"
        onBlur={input.onBlur}
        fullWidth={fullWidth}
        helperText={touched && error ? error : ""}
      />
    </div>
  );
};

TextFieldWrapper.defaultProps = {
  multiline: false,
  fullWidth: false,
  required: false
};
TextFieldWrapper.propTypes = {
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  input: PropTypes.shape({}).isRequired,
  meta: PropTypes.shape({
    touched: PropTypes.bool,
    error: PropTypes.string
  }).isRequired,
  multiline: PropTypes.bool,
  fullWidth: PropTypes.bool,
  required: PropTypes.bool
};

export default TextFieldWrapper;

TextField.spec.js:

import React from 'react';
import { shallow, mount } from 'enzyme';
import TextFieldWrapper from '../../components/common/TextFieldWrapper';
describe('TextField component', () => {
it('Should change value when onChange was called', () => {
    const onChange = jest.fn();
    const props = {
        label: 'Test Label',
        type: 'text',
        input: {},
        value: 'Hello world',
        meta: {
            touched: true,
            error: 'error'
        },
        onChange,
    }
    const wrapper = mount(<TextFieldWrapper {...props}/>);
    wrapper.find('TextField').simulate('change', {
        target: {
            value: 'This is just for test'
        }
    })
    expect(onChange).toHaveBeenCalledWith('This is just for test');
})

})

I got this error when I run the test:

expect(jest.fn()).toHaveBeenCalledWith(expected)
Expected mock function to have been called with:
  ["This is just for test"]
But it was not called.

I found a similair question: Enzyme simulate an onChange event using enzyme whith sinon.js, however it doesn't resolve my problem.

Answer 1

I resolved the question by updating my code:

import React from 'react';
import { shallow, mount } from 'enzyme';
import TextFieldWrapper from '../../components/common/TextFieldWrapper';
describe('TextField component', () => {
it('Should change value when onChange was called', () => {
    const onChange = jest.fn();
    const props = {
        label: 'Test Label',
        type: 'text',
        input: {
          onChange
        },
        value: 'Hello world',
        meta: {
            touched: true,
            error: 'error'
        }
    }
    const wrapper = mount(<TextFieldWrapper {...props}/>);
    const event = {
            target: {
                value: 'This is just for test'
            }
        }
    wrapper.find('TextField').simulate('change', event)
    expect(onChange).toHaveBeenCalledWith('This is just for test');
})

})

And the test passes now.

Answer 2

Your TextFieldWrapper does not have an onChange prop. It is input.onChange that is being passed to the TextField. To simulate you will need to find the input and simulate that