Javascript 如何测试表单提交与笑话和酶的反应？

我正在学习带钩子的reactjs表单，现在我想用jest和Ezyme测试提交表单

这是我的登录组件

import React from 'react'

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login

从“React”导入React
函数登录（）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const handleSubmit=async（e）=>{
e、 预防默认值（）；
//..api调用
}
返回(
setEmail（e.target.value）}/>
setPassword（e.target.value）}/>
)
}
导出默认登录名

这是login.test.js文件

 describe('my sweet test', () => {
    it('clicks it', () => {
      
       const wrapper = shallow(<Login />);
       const updatedEmailInput = simulateChangeOnInput(wrapper, 'input#email-input', 'blah@gmail.com')
       const updatedPasswordInput = simulateChangeOnInput(wrapper, 'input#password-input', 'death'); 

       expect(updatedEmailInput.props().value).toEqual('blah@gmail.com');
       expect(updatedPasswordInput.props().value).toEqual('death');

       const instance = wrapper.instance()
       const spy = jest.spyOn(instance, 'handleSubmit')
   
       instance.forceUpdate();    
   
       const submitBtn = app.find('#sign-in')
       submitBtn.simulate('click')
       expect(spy).toHaveBeenCalled()

    })
    
  })

description（'my sweet test'，（）=>{
它（'点击它'，（）=>{
常量包装器=浅（）；
const updatedEmailInput=simulateChangeOnInput（包装器，'input#email input'，'blah@gmail.com')
const updatedPasswordInput=simulateChangeOnInput（包装器，'input#password input'，'death'）；
expect（updatedEmailInput.props（）.value）.toEqual（'blah@gmail.com');
expect（updatedPasswordInput.props（）.value）.toEqual（'death'）；
const instance=wrapper.instance（）
const spy=jest.spyOn（实例'handleSubmit'）
forceUpdate（）；
const submitBtn=app.find（“#登录”）
submitBtn.simulate（'单击'）
expect（spy）.tohavebeincalled（）
})
})

不幸的是，当我运行

npm测试时，我得到了以下错误。

我需要做些什么来解决这个错误，或者有人能提供一个关于如何测试表单提交的教程吗？
在文档中，有人说不能将shall.instance（）用于功能组件
它将返回空值：
关于这个问题，以前也有一个答案

您可以将经过验证的函数handleSubmit传递给以prop身份登录，如图所示

//单元测试
描述（'SomeComponent'（）=>{
它（'单击按钮时验证模型'，（）=>{
const handleSubmit=jest.fn（）；
常量包装器=装入(
);
const instance=wrapper.instance（）；
const submitBtn=app.find（“#登录”）
submitBtn.simulate（'单击'）
expect（handleSubmit）.tohavebeincall（）；
});
}

您需要在登录组件中调用此测试函数handleSubmit，作为onSubmit的一部分，或者从上层组件导出整个onSubmit。导入部分登录函数的登录代码示例

import React from 'react'

function Login( {handleSubmit}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const onSubmit = async (e) => {
        if (handleSubmit) {
          handleSubmit()
        }
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={onSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login


从“React”导入React
函数登录（{handleSubmit}）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const onSubmit=async（e）=>{
if（handleSubmit）{
handleSubmit（）
}
e、 预防默认值（）；
//..api调用
}
返回(
setEmail（e.target.value）}/>
setPassword（e.target.value）}/>
)
}
导出默认登录名

导入提交功能的登录代码示例

import React from 'react'

function Login( {handleSubmit}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
   
    // handleSubmit is imported with props
 
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login


从“React”导入React
函数登录（{handleSubmit}）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
//handleSubmit随道具一起导入
返回(
setEmail（e.target.value）}/>
setPassword（e.target.value）}/>
)
}
导出默认登录名
在文档中提到，不能将shall.instance（）用于功能组件
它将返回空值：
关于这个问题，以前也有一个答案

您可以将经过验证的函数handleSubmit传递给以prop身份登录，如图所示

//单元测试
描述（'SomeComponent'（）=>{
它（'单击按钮时验证模型'，（）=>{
const handleSubmit=jest.fn（）；
常量包装器=装入(
);
const instance=wrapper.instance（）；
const submitBtn=app.find（“#登录”）
submitBtn.simulate（'单击'）
expect（handleSubmit）.tohavebeincall（）；
});
}

您需要在登录组件中调用此测试函数handleSubmit，作为onSubmit的一部分，或者从上层组件导出整个onSubmit。导入部分登录函数的登录代码示例

import React from 'react'

function Login( {handleSubmit}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const onSubmit = async (e) => {
        if (handleSubmit) {
          handleSubmit()
        }
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={onSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login


从“React”导入React
函数登录（{handleSubmit}）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const onSubmit=async（e）=>{
if（handleSubmit）{
handleSubmit（）
}
e、 预防默认值（）；
//..api调用
}
返回(
setEmail（e.target.value）}/>
setPassword（e.target.value）}/>
)
}
导出默认登录名

导入提交功能的登录代码示例

import React from 'react'

function Login( {handleSubmit}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
   
    // handleSubmit is imported with props
 
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login


从“React”导入React
函数登录（{handleSubmit}）{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
//handleSubmit随道具一起导入
返回(
setEmail（e.target.value）}/>
setPassword（e.target.value）}/>
)
}
导出默认登录名
那么，我需要做什么来测试我的表单提交？你可以通过验证函数作为道具，如此处所示。你需要在登录组件中使用此test handleSubmit函数。你可以使用此test handleSubmit函数来测试我的表单提交。我需要做什么来测试我的表单提交？你可以通过验证函数作为道具，如此处所示。你需要使用此test handleSubmit函数登录组件中的函数可用于无次调用