Reactjs React-功能组件，测试函数是否被调用onChange（使用Jest和Enzyme）

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

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

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

constproduct=（）=>{
常量更改=（值）=>{
console.log（值）；
}
返回(
{handleOnChange（e.target.value）}/>
)
}

我想测试当输入改变其值时是否调用了“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);    
});

let包装器；
在每个之前（（）=>{
包装器=浅（）；
});
描述（'产品交互'，（）=>{
它（'输入更改时应调用handleOnChange函数'，（）=>{
const mockedhandleOnChange=jest.fn（）；
wrapper.handleOnChange=mockedhandleOnChange；
find（'input'）.simulate（'change'，{target:{value:10}}）；
预期（模拟手变）。已被催收时间（1）；
});

}))

当然，它不起作用，因为我无法通过“wrapper.handleOnChange”访问函数

---

请帮忙

你应该让React

state

成为真理的唯一来源。当前，程序中的

输入

正在保持其自身的状态。更好的选择是将其用作。一旦您将

input

用作受控组件，您的程序将如下所示：

class Product extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }
  handleOnChange = (value) => {
    this.setState({ value })
  }

  return (
    <div>
      <input id="input1" type="text" value={this.state.value} onChange={(e) => {handleOnChange(e.target.value)}} />
    </div>
  )
}

let wrapper;
beforeEach(() => {
  wrapper = shallow(<Product />);
});
describe('Product interactions', () => {
  it('should call handleOnChange function on input change', () => {
    wrapper.find('#input1').getNode().props.onChange({
      target: { value: '123' }
    });
    expect(wrapper.state().value).toEqual('123');
  });
});

---

handleOnChange

是函数内部声明的常量，在函数外部不可用。顺便说一下，通常最好测试函数内部的内容是否已被调用，或者UI本身是否已更改。在本例中，您应该声明

console.log

它被调用（我知道它不是真正的代码）Emanuele，非常感谢您的评论。你完全正确。@azu我的回答对你有帮助吗？Mukesh，非常感谢你的帖子。它在课堂上帮助我。不过，我现在尝试通过使用带有挂钩的功能组件来避免它们。这使得测试更加困难。