无法理解为什么相似测试只能通过1次而不是其他通过,也无法发现它

时间:2019-02-17 11:54:23

标签: javascript testing enzyme

这是一个模拟文本区域中存在的注释的简单测试,而第一个测试通过时,下一个模拟从文本区域提交文本,运行handleSubmit(目前已连接到我的表单),该操作清除了文本区域,但是测试指出该注释是预期的(向=> .toEqual(“”)倾词;

  beforeEach(() => {
    wrapper.find("textarea").simulate("change", {
      target: { value: "new comment" }
    });


    wrapper.update();
  });

  it("has a text area that user can type into", () => {
    expect(wrapper.find("textarea").prop("value")).toEqual("new comment");
  });

  it("simulate button click (in real form submit) and clear textarea", () => {
    wrapper.update();
    wrapper.find("form").simulate("submit");
    wrapper.update();
    expect(wrapper.find("textarea").prop("value")).toEqual("");
  });
});

edit: here's the component I wanted to test...

    import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";

class CommentBox extends Component {
  state = {
    comment: ""
  };

  handleChange = e => {
    e.preventDefault();
    this.setState({ comment: e.target.value });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.saveComment(this.state.comment);
    this.setState({ comment: "" });
  };

  render() {
    return (
      <form onSubmit={this.handleSubumit}> <-------------- TYPO :(
        <h2>Add a comment:</h2>
        <textarea onChange={this.handleChange} value={this.state.comment} />
        <div>
          <button>Submit comment</button>
        </div>
      </form>
    );
  }
}

export default connect(
  null,
  actions
)(CommentBox);

1 个答案:

答案 0 :(得分:0)

beforeEach(() => {
    wrapper.find("textarea").simulate("change", {
      target: { value: "new comment" }
    });


    wrapper.update();
  });

  it("has a text area that user can type into", () => {
    expect(wrapper.find("textarea").prop("value")).toEqual("new comment");
  });

  it("simulate button click (in real form submit) and clear textarea", () => {
    wrapper.find("form").simulate("submit");
    wrapper.update();
       expect(wrapped.find("textarea").prop("value").length).toEqual(0);

  });
});