¿Cuál es la forma correcta de probar un método dentro de un componente de reacción, en este caso, componenteDidMount? Quiero probar la función setTimeOut dentro del componente. ¿Debo usar stub? Por ejemplo el siguiente código:
componentDidMount() { setTimeout(() => this.setState({ isOpen: true }), 1); }¿Cómo puedo probar que se llama a setTimeout?
Intenté con lo siguiente y no funcionó. ¿Qué me estoy perdiendo?
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) })Recibo el siguiente error: TypeError: No se puede leer la propiedad 'be' de null._onTimeout indefinido (test/Components/Ad.unit.js:42:5)
Aquí hay un ejemplo que usa moka, chai y enzima:
El componente:
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'La prueba:
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) }) })El marco Mocha tiene soporte para pruebas asincrónicas y también le permite usar setTimeout en su prueba. Luego, realiza sus afirmaciones dentro de la devolución de llamada asincrónica.
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); });¿Cómo puedo usar las funciones setTimeout() dentro de los casos de prueba de Mocha?