React测试。如何测试React组件内的函数。

3

如何正确测试React组件中的方法,例如componentDidMount。我想测试组件内部的setTimeOut函数。我应该使用stub吗?例如下面的代码:

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

我该如何测试setTimeout是否被调用?

我尝试了以下方法,但没有成功。我错过了什么吗?

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

我遇到了以下错误: TypeError: 无法读取未定义的属性'be' null._onTimeout (test/Components/Ad.unit.js:42:5)

1
setTimeOut是你自己的函数还是你指的是setTimeout?无论哪种情况,你究竟想要测试什么? - Tom Fenech
返回已翻译的文本:应该是setTimeout(对不起)。我想要测试的是setTimeout是否以正确的参数被调用。 - zeid10
测试“什么”发生会不会更好呢?比如,经过一段时间后会打开某些东西。 - Tom Fenech
我也会测试那个。但我的问题是,我该如何从我的测试中调用setTimeout函数呢? - zeid10
这很容易通过使用enzyme和浅渲染来完成。 - john_omalley
@john_omalley 你有一个示例吗? - zeid10
2个回答

2
以下是使用mocha、chai和enzyme的示例:
组件:
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'

测试:

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

})

我遇到了以下错误:TypeError: Cannot read property 'be' of undefined null._onTimeout (test/Components/Ad.unit.js:42:5)。请查看我编辑后的问题以获取我的测试信息。 - zeid10
1
这个例子是针对 chai 的 'should' 语法的... 如果你使用的是 mocha 进行断言,那么请根据你所使用的 DSL 进行调整(当然前提是你正在使用 mocha)。 - john_omalley

0

Mocha框架支持异步测试,并允许您在测试中使用setTimeout。然后,您可以在异步回调函数中进行断言。

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

如何在Mocha测试用例中使用setTimeout()函数?


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接