谁能提供一个关于 React-Redux Jest 测试的例子？

Question

我很难学习如何使用笑话。我遇到的所有教程要么教你如何测试渲染到 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);

Answer 1

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

因此，如果您像这样导出原始组件：

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

然后你可以通过导入命名的export来测试它作为一个标准的react组件，比如

import { Users } from './Users';

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

如果您想测试connected 组件，因为您不希望shallow 渲染，并且您可能渲染了很多嵌套连接的组件，您需要用<Provider> 包装您的组件并为其创建一个存储.

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

Recipes > Writing tests 的 redux 官方文档中对所有内容都进行了很好的解释，所以我的建议是仔细阅读整章。您还可以在此处阅读有关测试动作创建器、reducer 甚至更高级概念的内容。

为了阅读更多内容并获得更好的背景，我鼓励从官方 redux / react-redux repos 中检查以下这 2 个 cmets。

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

---

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

---

StackOverflow 上的相关问题：

How to Unit Test React-Redux Connected Components?