小编Azu*_*Azu的帖子

如何测试函数是否在功能性 React 组件中调用 onChange?

我有一个需要测试的简单功能组件。

const Product = () => {
    const handleOnChange = (value) => {
        console.log(value);
    }

    return (
        <div>
            <input type="text" onChange={(e) => {handleOnChange(e.target.value)}} />
        </div>
    )
}
Run Code Online (Sandbox Code Playgroud)

我想测试当输入更改其值时是否调用了“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);    
});
Run Code Online (Sandbox Code Playgroud)

});

当然它不起作用,因为我无法通过“wrapper.handleOnChange”访问该功能。

请帮忙!

testing reactjs jestjs enzyme

5
推荐指数
1
解决办法
2830
查看次数

标签 统计

enzyme ×1

jestjs ×1

reactjs ×1

testing ×1