javascript - 如何使用 enzyme 和 jest 测试 onChange 输入事件

Question

我正在尝试使用 enzyme 和 jest 测试我的组件的 onChange 事件。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.

我发现了一个类似的问题:Enzyme simulate an onChange event使用 sinon.js enzyme ，但是它不能解决我的问题。

Answer 1

我通过更新我的代码解决了这个问题:

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

})

现在测试通过了。