Question

我是单元测试的新手，我正在尝试在登录表单上测试验证消息。当用户输入不正确的信息并提交表单时，将显示错误消息组件。当我尝试测试此错误组件是否存在时，我得到了错误的响应。任何帮助，将不胜感激。

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>
);

}

和我的LoginForm.test.js文件

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);
});
});

前两个测试通过了，但是第三个失败了

Answer 1

一方面，在前两个测试中，您仅测试<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Centennial It's Academic</title> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"> <link href="main.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">  </head> <body> <div class="bg-img"> <header> <div id="nav">  <div class="background"></div> <nav class="container"> <div class="menu1"> <a id="navLinks" href="#home">Home</a> </div> <div class="menu2"> <a id="navLinks" href="#upcoming">Tournaments</a> </div> <div class="logo"> <p>It's Academic</p> </div> <div class="menu3"> <a id="navLinks" href="#history">History</a> </div> <div class="menu4"> <a id="navLinks" href="#faq">Contact Info</a> </div> </nav>  </div> </header> <div class="Minfo"> <div class="subtitle"> CENTENNIAL<br> <div class="title"> It's Academic </div> <br> <div class="subtext"> Meets every Tuesday in Room 506 </div> </div> </div> </div> </body> </html>方法。点击模拟虽然有作用，但实际上并不会影响测试结果。

第三项测试失败的原因很可能是validate是异步的。这意味着您还必须使期望不同步。

如何测试动态反应组件

1 个答案: