Тестирование входного компонента с помощью jest Enzyme

Question

У меня есть простой компонент ввода, который я хочу протестировать с помощью jest, энзима.

import TextField from '@material-ui/core/TextField';
import React from 'react';

const TextComponent = (props) => {
  const handleInputChange = (name) => ({ target }) => {
    props.handleChange({ [name]: target.value }, target.value);
  };
  return (
    <TextField onChange={handleInputChange(props.name)} {...props} className="textComponent" />
  );
};

export default TextComponent;

Мой тестовый пример выглядит так

import React from 'react';
import { mount } from 'enzyme';
import { TextComponent } from '../../../tests';

test('<TextComponent> with label, name', () => {
  const onChangeMock = jest.fn();
  const handleChangeMock = jest.fn();
  const input = mount(
    <TextComponent
      label="Test"
      onChange={onChangeMock}
      value="test value"
      variant="outlined"
      name="testname"
      handleChange={handleChangeMock}
    />
  );
  expect(input.props().label).toEqual('Test');
  expect(input.props().name).toEqual('testname');
  expect(input.props().variant).toEqual('outlined');
  input.find('input').simulate('change');
  expect(handleChangeMock).toBeCalledWith({testname: 'test value'}, 'test value');
});

Во время выполнения тестового примера япоявляется сообщение об ошибке

Warning: React does not recognize the `handleChange` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it
 as lowercase `handlechange` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Как проверить, вызывается ли моя функция handleChangeMock с правильными данными?

Answer 1

В ваших тестах эти реквизиты передаются TextComponent

//...
      label="Test"
      onChange={onChangeMock}
      value="test value"
      variant="outlined"
      name="testname"
      handleChange={handleChangeMock}
//...

Однако в реализации TextComponent все эти реквизиты перенаправляются в MUITextField после оформления handleChange реквизита.

<TextField onChange={handleInputChange(props.name)} {...props} className="textComponent" />

Реквизит handleChange должен быть исключен из пересылки в компоненте MUITextField после того, как он оформлен и передан как реквизит onChange для компонента MUITextField.

Это может быть достигнуто с помощью деструктуризации объекта.

const TextComponent = (props) => {
  const {handleChange, ...restProps} = props;
  const handleInputChange = (name) => ({ target }) => {
    handleChange({ [name]: target.value }, target.value);
  };
  return (
    <TextField
        onChange={handleInputChange(props.name)} 
        {...restProps} 
        className="textComponent"
    />
  );
};

Кроме того, пропустите onChange проп в тесте.Он переопределяет декорированную onChange опору в TextComponent реализации, потому что restProps будет содержать еще одну onChange опору.