關於 redux 容器的單元測試用例實現

Question

如何為與下面給出的組件關聯的給定容器編寫單元測試用例？ 這里的 PopupNotification.jsx 是一個以 PopupNotification.js 作為容器文件的組件文件。 我想要一個容器文件的開玩笑單元測試用例實現。

PopupNotification.jsx --> 組件文件

import React from "react";
import PropTypes from "prop-types";

import { notyIcons, notyTimeout } from "../helpers/constants";

class PopupNotification extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showNoty: props.showNoty
    };

    this.notyTimer = null;
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return {
      showNoty: nextProps.showNoty
    };
  }

  shouldComponentUpdate() {
    return true;
  }

  startNotyTimer() {
    let __self = this;

    if (this.notyTimer) {
      clearTimeout(this.notyTimer);
    }

    this.notyTimer = setTimeout(function() {
      __self.closeNoty();
    }, notyTimeout);
  }

  componentWillUnmount() {
    if (this.notyTimer) {
      clearTimeout(this.notyTimer);
    }

    this.setState({ showNoty: false });
  }

  closeNoty() {
    let { id } = this.props;

    this.props.clearNotification(id);
    this.setState({
      showNoty: false
    });
  }

  getNotyIcon() {
    return <i className={`notification-popup__icon pos-l-m ${notyIcons[this.props.type]}`} />;
  }

  getNotyLayout() {
    let notyIcon = this.getNotyIcon();
    let { message: notyMessage, type } = this.props;

    return (
      <div className={`pure-g notification-popup ${type}`}>
        <div className="pure-u-1-8 pos">{notyIcon}</div>
        <div className="pure-u-7-8">
          <div className="u-margin-8--left">{notyMessage}</div>
        </div>
      </div>
    );
  }

  render() {
    var notyLayout = null;

    if (this.state.showNoty) {
      this.startNotyTimer();
      notyLayout = this.getNotyLayout();
    }

    return notyLayout;
  }
}

PopupNotification.propTypes = {
  message: PropTypes.string,
  type: PropTypes.string,
  id: PropTypes.number,
  showNoty: PropTypes.bool,
  clearNotification: PropTypes.func
};

PopupNotification.defaultProps = {
  message: "",
  type: ""
};

export default PopupNotification;

PopupNotification.js --> 容器文件

import { connect } from "react-redux";
import { actions } from "../ducks/common";

import PopupNotification from "../components/PopupNotification";

const mapStateToProps = state => {
  let { common: { popupNotifications = [] } } = state;
  let showNoty = false;
  if (popupNotifications.length) {
    showNoty = true;
  }

  return {
    showNoty,
    ...popupNotifications[popupNotifications.length-1]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    clearNotification: notyId => {
      dispatch(actions.clearPopupNotification({id: notyId}));
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PopupNotification);

Answer 1

我建議使用redux-mock-store來完全控制您的商店。 然后你可以做類似的事情

const actions = store.getActions()
expect(actions).toEqual([expectedPayload])

從他們的文檔中復制

由於這是一個單元測試，你只需要測試這個容器負責什么，從你的例子中我看到它暴露了 redux 連接組件，所以你應該測試你的mapStateToProps和mapDispatchToProps是否正確執行。