任何人都可以提供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?