React Test. how to test function inside react component

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)

Is `setTimeOut` your own function, or do you mean [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)? Either way, what exactly are you trying to test? — Tom Fenech, Jan 19 '17 at 15:30
it should be setTimeout(sorry).what I want to test is if the setTimeout is being called with the right args. — zeid10, Jan 19 '17 at 15:33
Wouldn't it be better to test _what_ happens, e.g. that something is opened after a period of time? — Tom Fenech, Jan 19 '17 at 15:37
i will test that as well. but my problem is how do I call setTimeout from my test. — zeid10, Jan 19 '17 at 15:38
This is easy to do with [enzyme](http://airbnb.io/enzyme/) and shallow rendering. — john_omalley, Jan 19 '17 at 15:55

score 2 · Accepted Answer · answered Jan 19 '17 at 16:00

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

})

I am getting the following error.I get the following error: TypeError: Cannot read property 'be' of undefined null._onTimeout (test/Components/Ad.unit.js:42:5). see my edited question for my test. — zeid10, Jan 19 '17 at 18:49
this example is for the 'should' syntax of [chai](http://chaijs.com/)... adjust for whatever dsl you use for assertions in mocha (assuming of course you're using mocha) — john_omalley, Jan 19 '17 at 19:00

score 0 · Answer 2 · edited May 23 '17 at 12:01

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?

React Test. how to test function inside react component

2 Answers2