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