Czy ktoś może podać przykład na React-Redux Jest testowanie?

Question

Naprawdę ciężko mi się nauczyć, jak używać żartu. Wszystkie tutoriale, które napotkam, uczą cię, jak przetestować skrypt, który renderuje do domingu takiego jak <App /> z migawkami lub bez nich. Inne samouczki wyjaśniają, jak fałszywe testy z wejściami. ale nie mogę znaleźć samouczków, które jasno wyjaśniają i podają przykłady, których mogę użyć.

Na przykład skrypt z dołu mam pomysł, jak przetestować część renderowania, ale nie wiem, jak przetestować redux lub pozostałe funkcje.

Czy ktoś mógłby podać przykład, jak przetestować poniższy skrypt, który mogę wykorzystać jako odniesienie dla pozostałych plików, które muszę przetestować w moim projekcie?

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

Należy przetestować składnik surowy, ponieważ jest oczywiste, że redux działa, więc nie trzeba go testować. Jeśli z jakiegoś powodu chcesz przetestować mapStateToProps lub mapDispatchToProps wyeksportuj je również i przetestuj oddzielnie w izolacji.

Więc jeśli wyeksportować surowy składnik tak:

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

Następnie można przetestować go jako standard reagować składnik importując nazwie eksport, jak

import { Users } from './Users'; 

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

Jeśli chcesz przetestować Komponent connected, ponieważ nie chcesz renderować shallow i możesz renderować wiele zagnieżdżonych połączonych komponentów, musisz zawinąć komponent za pomocą <Provider> i utworzyć dla niego magazyn.

Możesz pomóc sobie, używając redux-mock-store, który zastosuje dla ciebie oprogramowanie pośrednie.

Wszystko jest bardzo dobrze wyjaśnione w oficjalnej dokumentacji redux w Recipes > Writing tests, więc moją propozycją jest uważne przeczytanie całego rozdziału. Można tam również przeczytać o testowaniu twórców akcji, reduktorów i jeszcze bardziej zaawansowanych koncepcji.

Aby przeczytać więcej i uzyskać lepsze tło, zachęcam do sprawdzenia tych 2 komentarzy poniżej od oficjalnych repozytoriów redux/react-redux.

Link bezpośredni do komentowania: https://github.com/reactjs/react-redux/issues/325#issuecomment-199449298

---

Link bezpośredni do komentowania: https://github.com/reactjs/redux/issues/1534#issuecomment-280929259

---

Pokrewne pytanie na StackOverflow:

How to Unit Test React-Redux Connected Components?