reactjs - Jest : Received number of calls: 0

Question

我正在为组件编写 Jest，以确保单击按钮时将执行 handleLogin。不知道为什么我一直收到 jest.fn() 没有执行一次的错误。我在这里删除了大部分不必要的代码

class Login extends React.Component{
constructor(props){
    super(props);
    this.state = { }
    this.handleLogin = this.handleLogin.bind(this);
}

handleLogin(e){
    e.preventDefault();
    const { email, password, invalidEmail, invalidPassword } = this.state;
    if(!invalidEmail && !invalidPassword){
        userAPI.login({email, password}).then(data=>{
            window.localStorage.setItem('email',data.email);
            window.localStorage.setItem('password',data.password);
        }).catch(error=>{
            this.setState({
                incorrectCredential: true  // login failed due to wrong credential
            })
        })
    }else{
        this.setState({
            invalidCredential: true   // login failed due to wrong format
        })
    }  // login failed 
}
render(){
    return(
        <header>
            <div className="login" data-test="login">
               <button className="login_content_main_join" type="submit" onClick={this.handleLogin} data-test="submit">Log in</button>

                </div>
            </header>
        )
}
export default Login;

这是我的测试部分

    it('Login/click to trigger this.handleLogin()', ()=>{
  const wrapper = shallow(<Login />);
  const instance = wrapper.instance();
  jest.spyOn(instance, 'handleLogin');
  findTestWrapper(wrapper, 'submit').simulate('click', {
    preventDefault: ()=> {}
  });
  expect(instance.handleLogin).toHaveBeenCalled();
})

我已经通过向其添加 console.log("run") 验证了 handleLogin() 可以通过模拟的“点击”执行，但我不断收到如下错误。

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

  26 |     preventDefault: ()=> {}
  27 |   });
> 28 |   expect(instance.handleLogin).toHaveBeenCalled();
     |                                ^
  29 | })

Answer 1

只是自己想出了解决方案，哈哈。 wrapper.instance() 需要在听完之后重新渲染。

it('Login/click to trigger this.handleLogin()', ()=>{
  const wrapper = shallow(<Login />);
  jest.spyOn(wrapper.instance(), 'handleLogin');
  wrapper.instance().forceUpdate(); // add this line
  findTestWrapper(wrapper, 'submit').simulate('click', {
    preventDefault: ()=> {}
  });
  expect(wrapper.instance().handleLogin).toHaveBeenCalled();
})