在 React JS 中，如何对容器中的 function 进行单元测试？

Question

我正在尝试模拟单击按钮并测试基于该单击发生的情况。 我试过 mocking function。 但是没有用。 我们如何测试 function 内部的语句？

我试过 mocking 一个 function 看看它是否被调用。 但我总是得到模拟 function not called

updateSelect =(e, model) => {
    window.alert('test');
    const value = e.type === "keyup" ? 
    e.target.parentNode.childNodes[2].innerText : e.target.innerText;
    if(!isEmpty(value)){
      this.setState({text: value});
      this.props.returnedValue({name : model, value});
    }
}

<button className="test" onClick={(e)=>this.updateSelect(e, model)}>Click</button>

我希望应该调用 function 或者至少必须执行 function 中的几个语句

Answer 1

您不能模拟组件内部的 function。 您必须通过类名或元素获取元素并模拟点击事件。 在模拟点击事件时，请确保您传递了 2 个参数（模拟 2 个参数并传递它）。 希望您使用的是 Enzyme 和 Jest/Mocha。 供您参考链接。

同样在断言中检查函数的预期 output（state 中的值等），不要检查是否调用了 function。