Reactjs Jest:收到的呼叫数：0

我正在为组件编写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;

---

考虑监视组件

prototype

，并使用内置

。在包装器上查找
方法

it("Login/click to trigger this.handleLogin()", () => {
  const wrapper = shallow(<Login />);

  const spy = jest.spyOn(Login.prototype, "handleLogin");  // spying on the Component prototype

  wrapper.find('button.login_content_main_join').simulate('click'); // use .find method on wrapper

  expect(spy).toHaveBeenCalled();
});

it（“登录/单击以触发此。handleLogin（）”，（）=>{
常量包装器=浅（）；
const spy=jest.spyOn（Login.prototype，“handleLogin”）；//监视组件原型
wrapper.find（'button.login\u content\u main\u join'）.simulate（'click'）；//在wrapper上使用.find方法
期望（间谍）。已被调用（）；
});
我自己刚刚想出了解决方案。LOL.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();
})

it（'Login/单击以触发此操作。handleLogin（），（）=>{
常量包装器=浅（）；
spyOn（wrapper.instance（），'handleLogin'）；
wrapper.instance（）.forceUpdate（）；//添加此行
findTestWrapper（包装器“提交”）.simulate（'单击'{
preventDefault:（）=>{}
});
expect（wrapper.instance（）.handleLogin）.toHaveBeenCalled（）；
})

it("Login/click to trigger this.handleLogin()", () => {
  const wrapper = shallow(<Login />);

  const spy = jest.spyOn(Login.prototype, "handleLogin");  // spying on the Component prototype

  wrapper.find('button.login_content_main_join').simulate('click'); // use .find method on wrapper

  expect(spy).toHaveBeenCalled();
});

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();
})