酶测试错误，方法" simulate "应该在1个节点上运行.而不是0

Question

我是测试新手，我正在尝试使用酶测试react应用程序，

我想测试(电子邮件输入)的值的变化，当我运行我的测试我得到这个错误!我看一切都很好，有什么问题吗?

"""""" "方法" simulation "意味着在一个节点上运行。0发现。}""""">

my component:

import React, { useState } from 'react';
import login from '../../../services/accountService';
import validate from '../../../utility/loginValidate';
import { Button, Error, Form, Input, Label, NavLink, Sign, SignBtn } from './signin-style';
/**
* Component to log in the website if you have valid information, and display errors if the information is invalid!
*/
function Signin() {
const [email, setemail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState(null);
/**
*this methode called when the user presses the submit button, first it will check if there is errors, if not it will submit the form!
*
* @param {onSubmit} event click on submit button event!
*/
const handleSubmit = (event) => {
event.preventDefault();
/**
* Function that check if the user inserted wrong information and put it on @error variable!, then it will update the @errors state!
*/
const error = validate(email, password);
setErrors(error);
};
/**
* Method that handle the change on { email input } by taking the input value and setting it on @email state!
*
* @param {onChange} event when user type in email input!
*/
const handleemailChange = (event) => {
const user = event.currentTarget.value;
setemail(user);
};
/**
*  Method that handle the change on { password input } by taking the input value and setting it on @password state!
*
* @param {onChange} event  when user type in password input!
*/
const handlePasswordChange = (event) => {
const pass = event.currentTarget.value;
setPassword(pass);
};
return (
<Sign>
<h1>Sign In</h1>
<NavLink to="/login">Need an account?</NavLink>
{errors ? <Error>* Invalid email or password!</Error> : null}
<Form onSubmit={handleSubmit}>
<div>
<Label htmlFor="email">
<Input
value={email}
onChange={handleemailChange}
id="email"
type="text"
placeholder="Email"
/>
</Label>
</div>
<div>
<Label htmlFor="password">
<Input
value={password}
onChange={handlePasswordChange}
id="password"
type="password"
placeholder="Password"
/>
</Label>
</div>
<SignBtn>
<Button onClick={() => login({ email, password })} type="submit">
Sign in
</Button>
</SignBtn>
</Form>
</Sign>
);
}
export default Signin;

my test:

let wrapper;
beforeEach(() => {
wrapper = shallow(<Signin />);
});
it('should render Signin component without crashing', () => {
expect(wrapper).toMatchSnapshot();
});
it('should check email input value', () => {
const emailInput = wrapper.find('Input[type="email"]');
emailInput.simulate('change', { target: { value: '[e-mail]' } });
expect(emailInput.prop('value')).toEqual('[e-mail]');
});

});

Answer 1

您选择的输入类型为[type="email"]，但您没有这样的元素，您的输入都是text类型;这就是为什么你得到0 found instead错误。

你可以试着选择只带有id的输入:

const emailInput = wrapper.find('#email');

此外:

1. 你的句柄回调使用currentTarget，所以你应该用它来模拟而不仅仅是target:emailInput.simulate('change', { currentTarget: { value: '[e-mail]' } });
2. emailInput仍然指向旧的包装(和值)，所以你需要再次.find()元素:expect(wrapper.find('#email').prop('value')).toBe('[e-mail]');