我很难学习如何使用 jest。我遇到的所有教程要么教你如何测试渲染到 dom 的脚本,例如 <App />
有或没有快照。其他教程介绍了如何使用输入模拟测试。但我似乎找不到清晰解释并给出我可以使用的示例的教程。
例如,下面的脚本我知道如何测试渲染部分,但我不知道如何测试 redux 或其余功能。
任何人都可以举一个如何测试以下脚本的示例吗?我可以将其用作我需要在项目中测试的其余文件的引用?
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import CustomSearch from '../Components/CustomSearch';
import CustomToolBar from '../Components/CustomToolBar';
import Table from '../Components/Table';
import InsertButton from '../Components/InsertButton';
import UserForm from './UserForm ';
import { fetchUsers, deleteUser } from '../../actions/users';
import setModal from '../../actions/modal';
import TableColumns from '../../constants/data/TableColumns';
class Users extends Component {
constructor(props) {
super(props);
this.onInsert = this.onInsert.bind(this);
this.onDelete = this.onDelete.bind(this);
this.onEdit = this.onEdit.bind(this);
this.props.fetchUsers({ accountId: this.props.userData.account.id, token: props.userData.token });
}
onDelete(row) {
if (confirm(`Are you sure you want to delete user ${row.first} ${row.last}?`)) {
this.props.deleteUser({
registered: row.registered,
id: row.id,
accountId: this.props.userData.account.id,
token: this.props.userData.token
});
}
}
onEdit(row) {
console.log(row);
const modal = () => (<UserForm data={row} isEdit />);
this.props.setCurrentModal(modal, 'Existing User Form');
}
onInsert() {
const modal = () => (<UserForm />);
this.props.setCurrentModal(modal, 'Add New User');
}
render() {
const options = {
searchField: (props) => (<CustomSearch {...props} />),
insertBtn: () => (<InsertButton onClick={this.onInsert} />),
toolBar: (props) => (<CustomToolBar {...props} />),
onDelete: this.onDelete,
onEdit: this.onEdit,
};
return (
<Table data={this.props.users} columns={TableColumns.USERS} options={options} title="Users" />
);
}
}
User.propTypes = {
setCurrentModal: PropTypes.func.isRequired,
fetchUsers: PropTypes.func.isRequired,
deleteUser: PropTypes.func.isRequired,
userData: PropTypes.object.isRequired,
users: PropTypes.array,
};
const mapStateToProps = (state) => ({
userData: state.userData.data,
users: state.tableData.users,
});
const mapDispatchToProps = (dispatch) => ({
fetchUsers: (data) => dispatch(fetchUsers(data)),
deleteUser: (data) => dispatch(deleteUser(data)),
setCurrentModal: (modal, title) => dispatch(setModal(modal, title, null, true)),
});
export default connect(mapStateToProps, mapDispatchToProps)(User);
最佳答案
您应该测试原始组件,因为很明显 redux 可以工作,因此您不必测试它。如果由于某种原因你想测试 mapStateToProps
或mapDispatchToProps
也导出它们并单独测试它们。
因此,如果您像这样导出原始组件:
export { Users }; // here you export raw component without connect(...)
export default connect(mapStateToProps, mapDispatchToProps)(Users);
然后你可以通过导入命名导出来将其作为标准 react 组件进行测试,例如
import { Users } from './Users';
describe('Users', () => ....
it('should render', () => ...
如果您想测试connected
组件,因为你不想要 shallow
渲染,也许你渲染了很多嵌套的连接组件,你需要用 <Provider>
包装你的组件并为其创建一个商店。
您可以使用 redux-mock-store 来帮助自己这将为您应用中间件。
一切都在 Recipes > Writing tests 的官方 redux 文档中得到了很好的解释。 ,所以我的建议是仔细阅读整章。您还可以在那里阅读有关测试操作创建器、 reducer 甚至更高级概念的内容。
要阅读更多内容并获得更好的背景知识,我鼓励您查看下面来自官方 redux/react-redux 存储库的两条评论。
评论直接链接:https://github.com/reactjs/react-redux/issues/325#issuecomment-199449298
<小时/>评论直接链接:https://github.com/reactjs/redux/issues/1534#issuecomment-280929259
<小时/>StackOverflow 上的相关问题:
关于reactjs - 任何人都可以提供 React-Redux Jest 测试的示例吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46791726/