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? Either way, what exactly are you trying to test? — Tom Fenech
– Tom Fenech, Commented Jan 19, 2017 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
– zeid10, Commented Jan 19, 2017 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
– Tom Fenech, Commented Jan 19, 2017 at 15:37
i will test that as well. but my problem is how do I call setTimeout from my test. — zeid10
– zeid10, Commented Jan 19, 2017 at 15:38

john_omalley · Accepted Answer · 2017-01-19 16:00:55Z

2

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

})

answered Jan 19, 2017 at 16:00

john_omalley

1,3986 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zeid10 Over a year ago

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.

john_omalley Over a year ago

this example is for the 'should' syntax of chai... adjust for whatever dsl you use for assertions in mocha (assuming of course you're using mocha)

Community · Accepted Answer · 2017-05-23 12:01:55Z

0

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?

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jan 19, 2017 at 16:00

wrschneider

19k17 gold badges109 silver badges192 bronze badges

Collectives™ on Stack Overflow

React Test. how to test function inside react component

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related