javascript - 如何在反应中用玩笑和酶测试表单提交?
问题描述
我正在学习带有钩子的 reactjs 表单,现在我想使用 jest 和酶来测试提交时的表单。
这是我的登录组件。
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
这是 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()
})
})
我需要做些什么来解决此错误,或者有人可以提供有关如何测试表单提交的教程吗?
解决方案
在文档中,据说您不能将 shallow.instance() 用于功能组件它将返回 null:https ://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/instance.html 还有一个先前的答案这个 Topik 酶实例()返回 null
您可以将经过验证的函数 handleSubmit 作为道具传递给 Login,例如How to use jest.spyOn with React function component using Typescript
// Unit test
describe('SomeComponent' () => {
it('validates model on button click', () => {
const handleSubmit = jest.fn();
const wrapper = mount(
<Login handleSubmit={handleSubmit}/>
);
const instance = wrapper.instance();
const submitBtn = app.find('#sign-in')
submitBtn.simulate('click')
expect(handleSubmit).toHaveBeenCalled();
});
}
您需要在登录组件中调用此测试函数 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
导入提交功能的登录代码示例
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
推荐阅读
- sql - SQL:为分组变量创建 if 条件
- haskell - 有没有办法在haskell中传递未知类型的运算符?
- c# - 如何从带有 id c# 的 Windows 服务调用 Web API
- c++ - 保存响应缓冲区并稍后在 NGINX 输出正文过滤器中发送它们
- sql - 在 SQL Server 的 nvarchar 列中搜索电子邮件
- javascript - 在从用户那里获得特定的 CSS 代码后重新加载 index.js
- android-studio - 安卓。录制视频时覆盖的 Surface 闪烁
- performance - 在 Jmeter 的另一个变量中传递变量
- c# - C# 对路径的访问被拒绝...(System.UnauthorizedAccessException:对路径“C:\”的访问被拒绝。)
- java - CSV 数据配置未向 HTTP 请求发送数据