我有一个需要测试的简单功能组件。
const Product = () => {
const handleOnChange = (value) => {
console.log(value);
}
return (
<div>
<input type="text" onChange={(e) => {handleOnChange(e.target.value)}} />
</div>
)
}
我想测试当输入更改其值时是否调用了“handleOnChange”函数。我试过了:
let wrapper;
beforeEach(() => {
wrapper = shallow(<Product />);
});
describe('Product interactions', () => {
it('should call handleOnChange function on input change', () => {
const mockedhandleOnChange = jest.fn();
wrapper.handleOnChange = mockedhandleOnChange;
wrapper.find('input').simulate('change', {target: {value: 10}});
expect(mockedhandleOnChange).toHaveBeenCalledTimes(1);
});
});
当然它不起作用,因为我无法通过“wrapper.handleOnChange”访问该功能。
请帮忙!
最佳答案
it('should call handleOnChange function on input change', () => {
const wrapper = shallow(<Product />);
const input = wrapper.find('input');
input.simulate('change', { target: { value: 10 } });
input = wrapper.find('input');
expect(input.props().value).toEqual(10);
});
关于reactjs - 如何测试函数是否在功能性 React 组件中调用 onChange?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59970684/