我正在尝试使用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和sinon.js模拟onChange事件,但这并没有解决我的问题。