我很難學習如何使用笑話。所有我遇到的教程要麼教你如何測試一個腳本,如<App />
呈現或不帶快照。其他教程將介紹如何使用輸入來模擬測試。但我似乎找不到解釋清楚的教程,並提供我可以使用的示例。任何人都可以提供React-Redux Jest測試的例子嗎?
例如,從下面的腳本我有如何測試渲染部分的想法,但我不知道如何測試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);
看作是任何人都沒有解答我會給你一個完整的解釋時,我就怎麼做這個免費的明天。你知道如何做一般的測試,它只是連接你不確定的組件的redux部分? –
我有一個關於如何做快照測試的想法以及關於它的基本知識。 – Eric