Question

我从React文档中获取了ReactJS组件（为给定用户呈现最新的gist URL），并且想知道对这样一个组件进行单元测试的最佳方法是什么：

目标是

隔离测试（使用模拟的http调用）
使用我们现有的测试设置（mocha）
保持简单
最终验证，当组件中的http调用成功时，状态更改触发了重新渲染，并且锚元素将呈现在其中的正确URL。

这是我要测试的组件：

import React from 'react'
import $ from 'jquery'

export default React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    fetch(this.props.source).then(function(response) {
      return response.json()
    }).then(function(json) {
      this.setState({
          username: json[0].owner.login,
          lastGistUrl: json[0].html_url
      });
    }.bind(this)).catch(function(ex) {
        console.log('parsing failed', ex)
    })
  },


  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={ this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

这是我第一次尝试测试它：

import TestUtils from 'react-addons-test-utils'
import React from 'react'
import { expect } from 'chai'
import { findDOMNode } from 'react-dom'

import UserGist from '../assets/js/components/UserGistWithFetch'
import nock from 'nock'

describe('UserGistWithFetch', () => {

  it('Displays the correct url', (done) => {

    nock.disableNetConnect();
    nock('https://api.github.com')
        .get('/users/octocat/gists')
        .reply(200, [{owner:"octocat",html_url:"https://gist.github.com/6cad326836d38bd3a7ae"}])

    const gist = TestUtils.renderIntoDocument(<UserGist source="https://api.github.com/users/octocat/gists"/>)

    let a = TestUtils.scryRenderedDOMComponentsWithTag(gist, 'a')[0]
    expect(a.getAttribute('href')).to.be.equal("https://gist.github.com/6cad326836d38bd3a7ae")
    done()
  })
})

此测试显然失败，因为组件最初在执行模拟回调之前呈现，而不是正确呈现锚点。

在模拟的http调用返回之前测试失败，组件没有机会重新渲染。

根据我的理解，Mocha提供了进行异步测试的方法（使用done()函数），但我无法在测试中找到一个钩子来放置它。

我需要哪些工具/框架才能实现这一目标？

使用模拟的http调用进行ReactJS组件测试

0 个答案: