javascript - 关于 redux 容器的单元测试用例实现
问题描述
如何为与下面给出的组件关联的给定容器编写单元测试用例?这里的 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);
解决方案
我建议使用redux-mock-store来完全控制您的商店。然后你可以做类似的事情
const actions = store.getActions()
expect(actions).toEqual([expectedPayload])
从他们的文档中复制
由于这是一个单元测试,你只需要测试这个容器负责什么,从你的例子中我看到它暴露了 redux 连接的组件,所以你应该测试你的mapStateToProps
&mapDispatchToProps
是否正确执行。
推荐阅读
- java - 为什么具有 void 返回类型方法的功能接口接受任何返回类型方法?
- azure - Azure Function App 使用 java 中的 startCopy 将 blob 从一个容器复制到另一个容器
- python - Matplotlib 颜色栏不缩小
- c++ - 在 c++ 中正确使用 .find() 方法
- python - python无法使用HTTP请求从异步函数获取返回值
- python-3.x - 从熊猫列表中删除重复项
- bash - 使用/解析远程变量时如何正确转义单引号?
- android - 迁移到 AndroidX 异常
- python - 在 python 中使用蒙版有效地模糊图像
- node.js - 通过 shell 运行命令而不在 Node.js 中运行命令到底是什么意思?