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.

and when you log wrapper.find('TextField') what do you get ? empty node ? — ZEE, Apr 24 '19 at 16:01

score 4 · Accepted Answer · answered Apr 25 '19 at 09:25

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.

Given that you have corrected your code as per my answer could you mark it as such. — user487779, Apr 25 '19 at 19:36

user487779 · Answer 2 · 2019-04-25T08:15:27.687

3

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

edited Apr 25 '19 at 08:15

answered Apr 25 '19 at 07:56

user487779

550
5
12

How to test an onChange input event with enzyme and jest

2 Answers2