title: How to test dynamic react components
body: <p>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. </p>
  
  <pre><code>onSubmit = () =&gt; {
    const errors = this.validate(this.state.data);
    this.setState({ errors });
    console.log("test");
  };
  
  validate = data =&gt; {
    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 (
    &lt;div&gt;
      &lt;Form onSubmit={this.onSubmit}&gt;
        &lt;Form.Field&gt;
          &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
          &lt;input
            type="email"
            id="email"
            name="email"
            placeholder="example@example.com"
            value={data.email}
            onChange={this.onChange}
          /&gt;
          {errors.email &amp;&amp; &lt;InlineError text={errors.email} /&gt;}
        &lt;/Form.Field&gt;
        &lt;Form.Field&gt;
          &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
          &lt;input
            type="password"
            id="password"
            name="password"
            value={data.password}
            onChange={this.onChange}
          /&gt;
        &lt;/Form.Field&gt;
        &lt;Button type="submit" primary&gt;
          Login
        &lt;/Button&gt;
      &lt;/Form&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>}</p>
  
  <p>and my LoginForm.test.js file</p>
  
  <pre><code>describe("user submits form", () =&gt; {
  it("Returns no errors with correct data", () =&gt; {
    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", () =&gt; {
    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", () =&gt; {
    const data = {
      email: "",
      password: "12345"
    };
    wrapper.find("Button").simulate("click");
    expect(wrapper.contains(&lt;InlineError text="Invalid Email" /&gt;)).toBe(true);
  });
  });
  </code></pre>
  
  <p>The first two tests pass however the third one fails</p>