javascript - React 与 enzyme 和 expect 的异步

Question

我正在使用 mocha、enzyme 和 expect 进行测试。我的组件中有一个函数运行另一个返回 promise 的函数，我不知道如何在运行第二个函数之前测试第一个函数的行为，然后再测试 promise (.then 之后出现错误)

第一个函数:

handleUpdateInput (value) {
    const { access, onUpdateInput } = this.props
    const v = !value || typeof value === 'string' ? value : access(value)
    if (onUpdateInput) {
      onUpdateInput(value ? v : '')
    }

    this.setState({
      searchText: value
    })

    this.dataSourceUpdate(value)
}

第二个功能:

dataSourceUpdate (value) {
    const { promise, access } = this.props

    if (value === '') {
      this.autoCompleteData = []
      this.setState({ dataSource: [] })
    } else {
      promise(value)
        .then(res => {
          this.autoCompleteData = res.data
          this.setState({
            dataSource: this.autoCompleteData.map(access).slice(0, getMenuItemNumber(this.refs.customAutoComplete))
          })
        })
        .catch(() => {
          this.autoCompleteData = []
          this.setState({ dataSource: [] })
        })
    }
  }

如果能给我一份使用这些工具测试异步函数的好教程，我将不胜感激 :)

Answer 1

由于您是从 props 获得 promise 的(这是个好主意)，您可以使用 sinon 模拟您的 promise 。

例如，您可以尝试:

var Promise = require('bluebird'); // you can use any Promise module here

var deferred = Promise.defer();
stub = sinon.stub(deferred, 'resolve').returns(deferred.promise);

deferred.resolve({res: { data: 'YOUR_DATA' }});
// or
deferred.reject(new Error('fake error'));