任何人都可以提供React-Redux Jest测试的例子吗？

Question

我很难学习如何使用笑话。所有我遇到的教程要么教你如何测试一个脚本，如<App />呈现或不带快照。其他教程将介绍如何使用输入来模拟测试。但我似乎找不到解释清楚的教程，并提供我可以使用的示例。

例如，从下面的脚本我有如何测试渲染部分的想法，但我不知道如何测试REDX或其他功能。

任何人都可以举例说明如何测试下面的脚本，我可以使用它作为我需要在我的项目中测试的其余文件的参考？

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); 

Answer 1

您应该测试原始组件，因为很明显，redux可以工作，因此您不必测试它。如果由于某种原因，您想要测试mapStateToProps或mapDispatchToProps也导出它们，并单独测试它们。

因此，如果您导出原始成分是这样的：

export { Users }; // here you export raw component without connect(...) 
export default connect(mapStateToProps, mapDispatchToProps)(Users); 

然后，你可以测试它作为一个标准的导入名为export反应成分，像

import { Users } from './Users'; 

describe('Users',() => .... 
    it('should render',() => ... 

如果你想测试connected组件，因为您不希望shallow呈现，也许您呈现大量嵌套的连接组件，您需要用<Provider>包装组件并为其创建存储。

您可以通过使用redux-mock-store来帮助自己，它将为您应用中间件。

在官方还原文档Recipes > Writing tests中一切都很好解释，所以我的建议是仔细阅读整章。您还可以在那里阅读有关测试行动创建者，简化者和更高级概念的内容。

要阅读更多内容并获得更好的背景，我鼓励从官方的redux/react-redux回购中查看以下2条评论。

直接链接评论：https://github.com/reactjs/react-redux/issues/325#issuecomment-199449298

---

直接链接评论：https://github.com/reactjs/redux/issues/1534#issuecomment-280929259

---

相关问题在计算器上：

How to Unit Test React-Redux Connected Components?