无法在 React 组件中测试提交处理程序答案

【问题标题】：Can't test submit handler in React component无法在 React 组件中测试提交处理程序
【发布时间】：2016-03-19 20:19:54
【问题描述】：

我正在尝试为我的组件测试事件，但未调用提交处理程序。除了事件之外，我所有的单元测试都在工作。我正在使用 Tape、Sinon 和 JSDOM，并在网上四处寻找有类似问题的人。有一个类似问题的 Github 问题，但我不能 100% 确定它是否完全相同。 https://github.com/facebook/react/issues/1185 SO 上还有一个相关的post，但它没有帮助，因为他们使用的是浅层渲染。

测试：

// Create a document using JSDOM
const document = createDocument();

let output;

const onSubmitHandler = spy();

// Render the DOM
output = renderDOM(
  <ToDoCreate
    onSubmit={onSubmitHandler}
  />,
document.body);

const form = TestUtils.findRenderedDOMComponentWithTag(output, 'form');

// Simulate a submit
TestUtils.Simulate.submit(form);

const actual   = onSubmitHandler.callCount;
const expected = 1;

// Test the event handler was called
assert.equal(actual, expected);
assert.end();

结果：

# ToDoCreate component
# ...submitted form to create a ToDo
not ok 14 should be equal
---
operator: equal
expected: 1
actual:   0
...

有没有人知道为什么这不起作用？

谢谢

更新：添加 ToDoCreate 的 render() 输出

<form className={toDoCreateClasses} onSubmit={this._handleToDoCreateSubmit}>
  <div className="form-group">
    <label className="sr-only">New ToDo</label>
    <input type="text" className="form-control ToDoInput" ref="title" placeholder="Add a new ToDo..." />
  </div>

  <button type="submit" className="btn btn-primary">Add</button>
</form>

更新：添加 _handleToDoCreateSubmit 方法

_handleToDoCreateSubmit(e) {
  e.preventDefault();

  // Get the ToDo title
  let title = this.refs.title.value;

  // Validate
  if ( title === '' ) {
    window.alert('You need to enter a ToDo first :)');
    return false;
  }

  // Trigger the submit event
  ToDoDispatcher.dispatch({
    actionType: 'TODO_CREATE_SUBMIT',
    title:      title
  });

  // Clear the Dom node
  this.refs.title.value = '';
}

【问题讨论】：

onSubmit 是如何连接到form 的？
@DavinTryon 我刚刚用渲染方法的输出更新了这个问题。
这是其中的一部分，但我想看看你在哪里使用this.props.onSubmit。现在这似乎发生在_handleToDoCreateSubmit 方法中。我们也能看到吗？
@DavinTryon 确定，添加在上面:)

标签： javascript unit-testing reactjs tdd sinon

【解决方案1】：

看看这个React Reusable Components 说：

无自动绑定
方法遵循与常规 ES6 类相同的语义，这意味着它们不会自动将 this 绑定到实例。您必须明确使用 .bind(this) 或箭头函数 =>.

并尝试使用以下命令更改您的 render()：

            <form className={""} onSubmit={this._handleToDoCreateSubmit.bind(this)}>
            <div className="form-group">
                <label className="sr-only">New ToDo</label>
                <input type="text" className="form-control ToDoInput" ref="title" placeholder="Add a new ToDo..." />
            </div>

            <button type="submit" className="btn btn-primary">Add</button>
        </form>

【讨论】：

感谢@baudo2048 - 提交处理程序在组件中工作正常，我实际上在处理绑定的构造函数中有this._handleToDoCreateSubmit = this._handleToDoCreateSubmit.bind(this);。我的问题是在单元测试中没有调用提交处理程序

【解决方案2】：

@GilesB 谢谢你，在回复之前我应该问一下。添加圆括号对我有用：

// Render the DOM
   output = renderDOM(
     <ToDoCreate
     onSubmit={onSubmitHandler()}
   />,
   document.body);

【讨论】：

谢谢@baudo2048！！我不敢相信我错过了，现在所有的测试都通过了:)