反应测试。 如何测试反应组件内的功能

Question

What is the proper way to test a method within a react component, in this case componentDidMount. I want to test the setTimeOut function inside the compoenent. Should I use stub? For example the code below:

 componentDidMount() {
        setTimeout(() => this.setState({ isOpen: true }), 1);
  }

How can I test the setTimeout being called?

I tried with the following and didn't work. What am I missing?

my imports:

import test from 'ava';
import React from 'react';
import { ad } from 'components/Ad/Ad';
import { shallow, mount } from 'enzyme';
import { stub } from 'sinon';
import { expect } from 'chai';
import  sinon from 'sinon';

let info;

test.beforeEach(() => {

  info = shallow(<ad {...props} />)
});

test('is active: true after mounting', done => {
  info.instance().componentDidMount()
  setTimeout(() => {
    info.state('active').should.be.true  <--line:42
    done()
  }, 0)
})

I get the following error: TypeError: Cannot read property 'be' of undefined null._onTimeout (test/Components/Ad.unit.js:42:5)

Answer 1

Here's an example that uses mocha, chai, and enzyme:

The component:

import React, {PropTypes as T} from 'react'
import classnames from 'classnames'

export default class FadeIn extends React.Component {
  constructor(...args) {
    super(...args)
    this.state = {active: false}
  }

  componentDidMount() {
    setTimeout(() => this.setState({active: true}), 0)
  }

  render() {
    const {active} = this.state
    return (
      <div className={classnames('fade-in', {active}, this.props.className)}>
        {this.props.children}
      </div>
    )
  }
}

FadeIn.propTypes = {
  className: T.string
}

FadeIn.displayName = 'FadeIn'

The test:

import React from 'react'
import {shallow} from 'enzyme'
import FadeIn from '../../src/components/FadeIn'

describe('FadeIn', () => {
  let component

  beforeEach(() => {
    component = shallow(<FadeIn/>)
  })

  it('is initially active: false', () => {
    component.state('active').should.be.false
    component.find('div.fade-in').prop('className').should.equal('fade-in')
  })

  it('is active: true after mounting', done => {
    component.instance().componentDidMount()
    setTimeout(() => {
      component.state('active').should.be.true
      component.find('div.fade-in').prop('className').should.equal('fade-in active')
      done()
    }, 0)
  })

})

Answer 2

The Mocha framework has support for asynchronous tests and allows you to use setTimeout in your test as well. Then you make your assertions within the asynchronous callback.

describe('test component', function() {
    it('should have isOpen true', function(done) {
        // *** setup your component here *** 
        console.log('waiting 3 seconds...');
        setTimeout(function () {
            console.log('waiting over.')
            // ** assert component state.isOpen == true **
            done(); // callback to indicate that test is over
        }, 3000);
    });

How can I use setTimeout() functions within Mocha test cases?