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

Question

I am trying to simulate on click of a button and test what's happening based on that click. I tried mocking function. But didn't work. How do we test the statements inside of a function?

I tried mocking a function to see if it has been called. But i always get mock 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>

I expect either the function should be called or at least few statements in the function has to be executed

Answer 1

You cannot mock function which is inside the component. You have to get element by className or element and simulate click event. While simulating click event make sure that you are passing that 2 params(Mock 2 params and pass it). Hope you are using Enzyme and Jest/Mocha. For your reference Link .

Also in assertions check the expected output of the function(Value in state, etc) and don't check whether the function is called or not.