I'm new to unit testing and I am trying to test validation messages on my login form. When the user enters incorrect information and submits the form, an error message component is displayed. When I try to test if this error component exists I get a falsy response. Any help would be appreciated.
onSubmit = () => {
const errors = this.validate(this.state.data);
this.setState({ errors });
console.log("test");
};
validate = data => {
const errors = {};
if (!Validator.isEmail(data.email)) errors.email = "Invalid Email";
if (!data.password) errors.password = "Password required";
return errors;
};
render() {
const { data, errors } = this.state;
return (
<div>
<Form onSubmit={this.onSubmit}>
<Form.Field>
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="example@example.com"
value={data.email}
onChange={this.onChange}
/>
{errors.email && <InlineError text={errors.email} />}
</Form.Field>
<Form.Field>
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
name="password"
value={data.password}
onChange={this.onChange}
/>
</Form.Field>
<Button type="submit" primary>
Login
</Button>
</Form>
</div>
);
}
and my LoginForm.test.js file
describe("user submits form", () => {
it("Returns no errors with correct data", () => {
const data = {
email: "dennis@gmail.com",
password: "12345"
};
wrapper.find("Button").simulate("click");
expect(wrapper.instance().validate(data)).toEqual({});
});
it("Returns error when error exists", () => {
const data = {
email: "",
password: "12345"
};
wrapper.find("Button").simulate("click");
expect(wrapper.instance().validate(data)).toEqual({
email: "Invalid Email"
});
});
it("Displays InlineError when error exists", () => {
const data = {
email: "",
password: "12345"
};
wrapper.find("Button").simulate("click");
expect(wrapper.contains(<InlineError text="Invalid Email" />)).toBe(true);
});
});
The first two tests pass however the third one fails
Aucun commentaire:
Enregistrer un commentaire