4

我从 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()函数），但我在测试中找不到一个钩子来放置它。

我需要什么工具/框架来完成它？

4

0 回答 0