反应如何用setTimeout测试出反应组分

Question

我遇到了这个测试问题，我不知道如何测试组件settimeout。任何人都有关于如何测试以下组件的建议：settimeout？非常感谢

import React, { PropTypes, Component } from 'react'; 
import styles from '../../../css/notification.css'; 

export default class Notification extends Component { 
    static propTypes = { 
     tagMetaUpdate: PropTypes.shape({ 
      submitUpdatedTagDataSuccessful: PropTypes.bool 
     }), 
     actions: PropTypes.shape({ 
      resetUpdatedTagDataSuccessfulFlag: PropTypes.func 
     }) 
    }; 

    constructor(props) { 
     super(props); 
     this.state = { 
      showMessage: true 
     }; 
    } 

    hideMessage(actions) { 
     this.timer = setTimeout(() => { 
      this.state.showMessage = false; 
      actions.resetUpdatedTagDataSuccessfulFlag(); 
      this.forceUpdate(); 
     }, 3000); 
    } 

    render() { 
     const { tagMetaUpdate, actions } = this.props; 
     const output = (tagMetaUpdate.submitUpdatedTagDataSuccessful && this.state.showMessage) ? 
      <div className={styles.notification}>Tag meta data successfully edited.</div> : null; 

     if (this.props.tagMetaUpdate.submitUpdatedTagDataSuccessful) { 
      this.hideMessage(actions); // HERE IS THE BIT BLOCKING ME 
     }else { 
      this.state.showMessage = true; 
     } 

     return <div>{output}</div>; 
    } 
} 

Answer 1

使用伪造sinnon时间会解决这个问题

http://sinonjs.org/

滚动到伪造的时间

Answer 2

直接改变状态通常是不明智的。尝试使用this.setState({})，并且当您调用setState时，this.forceUpdate是不必要的。 React会自己更新你的组件。

另外，尝试使用render方法仅执行呈现。没有变异状态和所有这一切。

如果你直接在渲染方法中做this.setState({ showMessage: true })，反应会抱怨它 - 这是不允许的。

React提供称为componentWillRecieveProps和componentWillUpdate的生命周期挂钩方法。你可以使用它们来检查道具是否改变，然后相应地进行setState。

componentWillReceiveProps(nextProps){ 
    if(!_.isEqual(nextProps, this.props) { 
    if(nextProps.tagMetaUpdate.submitUpdatedTagDataSuccessful){ 
     this.setState({ showMessage: true }) 
     this.timer = setTimeout(() => { 
     this.setState({ showMessage: false }) 
     actions.resetUpdatedTagDataSuccessfulFlag() 
     }, 3000) 
    } 
    } 
} 

需要注意的是：

• 由setTimeout的使用的setState，我已经消除了需要使用forceUpdate（）
• 我使用lodash做一个检查，看看是否有托从之前的渲染更改为当前渲染。反应将重新呈现组件出于以下原因之一：
  • 如果道具改变
  • 如果组件的状态更新
  • 如果父母中的一方需要更新任一两个原因。 所以我们做一个检查，看看更新只发生，因为道具已经改变，如果它已经改变，然后做一个setState显示消息和设置的超时在3秒后不显示消息。

这些都只是使用建议。你能告诉我更多关于你用于单元测试的框架吗？如果是开玩笑，我可能会有所帮助。