Question

在我的流星应用程序中，我正在通过测试我正在使用的所有方法进行一些单元测试。我正在做这样的测试（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()
  })
})

但是只有一部分被测试，它将消息存储到DB。但是我还要测试是否写一条消息并提交它（模糊事件）会调用这个方法。

这就是我的组件的样子。我需要知道如何对这个组件进行测试。因此，在此示例中，我需要测试是否在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 })
  }
})

Answer 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);
    });
})

Answer 2

如果您必须对此进行测试，则可以使用ref TextArea来手动触发模糊事件。您还应该能够存根Message#addPost来验证确实是模糊的。

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

React正确处理事件
您正在将函数传递给onBlur而不是简单地执行函数（对于较新的JavaScript开发人员而言是一个容易出错的错误）

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

ReactJS：如何测试组件功能？

2 个答案: