Testing ReactJS components with http call bullying

I took the ReactJS component (displaying the last gist url for this user) from React docs and wondered what is the best way to unit test such a component:

Goals

  • Testing individually (using mocking HTTP calls)
  • Use existing test setup (mocha)
  • Keep things simple.
  • Make sure that in the end, when the HTTP call is in a successful component, the change of state caused a re-rendering, and the binding element displays the correct URL in it.

Here is the component I want to test:

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} last gist is
        <a href={ this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

And here is my first attempt to test it:

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

Source: https://habr.com/ru/post/1650314/


All Articles