关于 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是否正确执行。