ReactJS：如何测试组件功能？答案

【问题标题】：ReactJS: How to test a component function?ReactJS：如何测试组件功能？
【发布时间】：2017-08-09 17:32:18
【问题描述】：

在我的流星应用程序中，我正在通过测试我正在使用的所有方法进行一些单元测试。我正在做这样的测试（mocha/chai）：

describe('postMessage', () => {
  it('should add message', (done) => {
    // EXECUTE
    const messageId = postMessage.call({ articleId: 123, content: 'Message text' })
    // VERIFY
    const message = Messenger.findOne(messageId) // get data from mongoDB
    expect(message.content).to.equal('Message text') // check for message
    expect(message.articleId).to.be.equal(123) // check for articleId
    done()
  })
})

但是这样只测试了一部分，即将消息存储到数据库。但是我还要测试写消息并提交（模糊事件）是否会调用这个方法。

这就是我的组件的样子。我需要知道如何对此组件进行测试。所以在这个例子中，我需要测试是否在 textarea 元素的 blur 事件上调用方法 postMessage 以及 result 的状态值是否获取 ID。我该怎么做？

组件

class Message extends Component {
  addPost (articleId, event) {
    const content = event.target.value
    postMessage.call(
      { content, articleId },
      (error, result) => {
        if (error) console.warn(error)
        if (result) this.setState({ result })
      }
    )
  }

  render () {
    return (
      <Form>
        <TextArea onBlur={this.addPost.bind(this, articleId)} />
      </Form>
    )
  }
}

方法

const postMessage = new ValidatedMethod({
  name: 'messenger.insert',
  validate: null,
  run ({ articleId, content }) {
    return Communicator.insert({ content, articleId })
  }
})

【问题讨论】：

标签： javascript reactjs unit-testing meteor chai

【解决方案1】：

也许enzyme+sinon 可以帮助您。我还将blur 行为测试与addPost 测试区分开来，这样更易于维护和阅读。

import { shallow } from 'enzyme';
import sinon from 'sinon';

describe('...', () => {
    it('Calls Message.addPost function when TextArea.onBlur', () => {
        // prepare mock and renders
        Message.addPost = sinon.spy();
        const wrapper = shallow(<Message />);
        const textArea = wrapper.find(TextArea)

        // simulate user action
        textArea.simulate('blur');

        // assert expected outcome
        expect(Message.addPost.calledOnce).to.equal(true);
    });
})

【讨论】：

【解决方案2】：

如果您必须对此进行测试，您可以使用ref for TextArea 手动触发模糊事件。您还应该能够存根 Message#addPost 以验证确实在 blur 上调用了它。

话虽如此，我必须指出，这并不是一个特别有价值的测试。您已经测试过addPost 可以按预期工作。通过测试在模糊上调用 addPost，您正在测试两件事：

React 正确处理事件
您将函数传递给 onBlur 而不是简单地执行函数（对于新的 javascript 开发人员来说很容易犯错误）

在我看来，这些都不是特别有价值的测试。

【讨论】：