当前位置: 首页 > 面试题库 >

酶模拟onChange事件

孟栋
2023-03-14
问题内容

我正在用Mocha和Enzyme测试反应成分。这是组件(为简化起见,已简化):

class New extends React.Component {

  // shortened for simplicity

  handleChange(event) {
    // handle changing state of input

    const target = event.target;
    const value = target.value;
    const name = target.name
    this.setState({[name]: value})

  }


  render() {
    return(
      <div>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group row">
            <label className="col-2 col-form-label form-text">Poll Name</label>
            <div className="col-10">
              <input
                className="form-control"
                ref="pollName"
                name="pollName"
                type="text"
                value={this.state.pollName}
                onChange={this.handleChange}
              />
            </div>
          </div>

          <input className="btn btn-info"  type="submit" value="Submit" />
        </form>
      </div>
    )
  }
}

这是测试:

it("responds to name change", done => {
  const handleChangeSpy = sinon.spy();
  const event = {target: {name: "pollName", value: "spam"}};
  const wrap = mount(
    <New handleChange={handleChangeSpy} />
  );

  wrap.ref('pollName').simulate('change', event);
  expect(handleChangeSpy.calledOnce).to.equal(true);
})

我期望当用户在<input>框中键入文本时,handleChange将调用该方法。上面的测试失败了:

AssertionError: expected false to equal true
+ expected - actual

-false
+true

at Context.<anonymous> (test/components/new_component_test.js:71:45)

我究竟做错了什么?

我应该澄清一下,我的目标是测试该方法handleChange是否被调用。我怎样才能做到这一点?


问题答案:

您可以直接通过原型直接监视该方法。

it("responds to name change", done => {
  const handleChangeSpy = sinon.spy(New.prototype, "handleChange");
  const event = {target: {name: "pollName", value: "spam"}};
  const wrap = mount(
    <New />
  );
  wrap.ref('pollName').simulate('change', event);
  expect(handleChangeSpy.calledOnce).to.equal(true);
})

另外,您可以在实例的方法上使用间谍,但是您必须进行强制更新,因为在调用mount之后该组件已经呈现,这意味着onChange已绑定到其原始对象。

it("responds to name change", done => {
  const event = {target: {name: "pollName", value: "spam"}};
  const wrap = mount(
    <New />
  );
  const handleChangeSpy = sinon.spy(wrap.instance(), "handleChange");
  wrap.update(); // Force re-render
  wrap.ref('pollName').simulate('change', event);
  expect(handleChangeSpy.calledOnce).to.equal(true);
})


 类似资料:
  • 问题内容: 我正在使用Jest和Enzyme来测试React复选框组件。 这是我的测试: 但是在运行测试时出现此错误: 这是我的组件的输入: 我 想 那我需要通过一个事件作为第二个对象,但我不知道如何做到这一点。 谢谢 问题答案: 函数采用其他参数,这些参数将传递给事件处理程序。您可以嘲笑事件。例如:

  • 问题内容: 如何监听基于控件的更改事件? http://jsfiddle.net/NV/kb3gN/1621/ 问题答案: 编辑: 请参阅SebastienLorber的答案,该答案修复了我的实现中的错误。 编辑06/2016:我刚刚遇到了一个新问题,当浏览器尝试“重新格式化”刚刚给他的html时,会导致组件始终重新呈现,这会出现一个新问题。看到 编辑07/2016:这是我的生产实现。它有一些您可

  • 事件,就是网页中某个特别值得关注的瞬间。事件经常由用户操作或通过其他浏览器功能来触发。 但很少有人知道,也可以使用JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样。也就是说,这些事件该冒泡还会冒泡,而且照样能够导致浏览器执行已经指定的处理它们的事件处理程序。在测试Web 应用程序,模拟触发事件是一种极其有用的技术。DOM2 级规范为此规定了模拟特定事件的方式

  • 模拟事件 浏览器事件的相关信息有:Event对象、事件类型、事件处理程序。那么模拟出的事件也应该有这些信息。 DOM中的事件模拟 模拟事件的步骤: 第一步:通过document.createEvent()方法创建event对象。 可以在document对象上使用 createEvent()方法创建 event事件对象。该方法接收一个参数,表示事件类型的字符串。DOM2中字符串是以复数表示的,在DO

  • 问题内容: 我有一个React组件(为了演示该问题,对此进行了简化): 现在,我要测试提供的值的调用。 为此,我想创建一个代替组件方法的笑话模拟函数。 到目前为止,这是我的测试用例: 但是我在控制台中得到的只是: 语法错误 所以我的问题是,如何正确地用酶模拟组分方法? 问题答案: 可以通过以下方式模拟该方法: 您还需要在被测组件的包装器上调用.update,以便正确注册模拟功能。 语法错误来自错误

  • 问题内容: 我正在使用事件委托来侦听DOM中较低级的事件,但不适用于选择框上的onchange事件。onchange事件会传播还是冒充DOM? 谷歌搜索未能找到结论性的答案。 问题答案: 根据规范,,,应该气泡和和不应该泡沫。 此行为是正确实现在所有web浏览器除了IE <9,即,,,做适当气泡在IE> = 9。