Как проверить входное событие onChange с энзимом и шуткой

Question

Я пытаюсь проверить событие onChange моего компонента, используя enzyme и 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');
})

})

Я получил эту ошибку при запуске теста:

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

Я нашел похожий вопрос: Фермент имитирует событие onChange с использованием энзима sinon.js, но это не решает мою проблему.

Answer 1

У вашего TextFieldWrapper нет свойства onChange. Это input.onChange, который передается в TextField. Для имитации вам нужно найти вход и смоделировать, что

Answer 2

Я решил вопрос, обновив свой код:

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');
})

})

И теперь тест проходит.