vendredi 22 juin 2018

How to test dynamic react components

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