How to test dynamic react components - reactjs

Question

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

Answer 1

For one thing, in the first two tests you are testing the validate method only. The click simulation is doing something, but it does not actually affect the test outcome.
The reason third test fails is likely that setState is async. That means you also have to make your expectation async.