酶测试单击按钮处理程序调用（使用通过行函数声明的处理程序...或classe属性）

Question

对不起，我的英语：）

我想测试一下，如果我模拟一个按钮的点击，它的处理程序将被调用。

我认为我的问题出在我将点击处理程序声明为组件类的属性这一事实。

是否可以在不更改处理程序声明的情况下进行此单元测试？

我的组件：

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchDocuments, getDocuments, getDocumentColumns, cleanFiltersData } from "../../store";

import DocsTab from "../DocsTab";
import { Redirect } from "react-router-dom";

export class DocsList extends Component {
  componentWillMount() {
    const { fetchDocuments } = this.props;
    this.stringQuery = this.getStringQuery();
    if (this.stringQuery) fetchDocuments(this.stringQuery);
  }

  getStringQuery() {
    return this.props.location.search;
  }

  handelNewSearch = e => {
    this.props.cleanFiltersData();
    this.props.history.goBack();
  };

  handelEditSearch = e => {
    this.props.history.goBack();
  };

  render() {
    const { documents, columns } = this.props;

    return this.stringQuery ? (
      <div className="DocsList">
        <button className="edit-search-button" onClick={this.handelEditSearch}>
          Modifier la recherche
        </button>
        <button className="go-back-button" onClick={this.handelNewSearch}>
          Nouvelle recherche
        </button>
        <DocsTab className="aaa" columns={columns} documents={documents} />
      </div>
    ) : (
      <Redirect to="/doc-search" />
    );
  }
}

const mapStateToProps = state => ({
  documents: getDocuments(state),
  columns: getDocumentColumns(state),
});

const mapDispatchToProps = { fetchDocuments, cleanFiltersData };

export default connect(mapStateToProps, mapDispatchToProps)(DocsList);

我的单元测试：

import React from "react";
import { shallow } from "enzyme";
import { DocsList } from "./DocsList";
import DocsTab from "../DocsTab";
import { Redirect } from "react-router-dom";

const mockProps = {
  location: { search: "old_DocOBJ=qsdqsd&ecm_RefDoc=sdfsdf&ecm_RefExterne=sdfsdf" },
  history: { push: jest.fn(), goBack: jest.fn() },
  documents: [
    { id: "1", a: "A0", b: "B0", c: "C0", d: "D0" },
    { id: "2", a: "A1", b: "B1", c: "C1", d: "D1" },
    { id: "3", a: "A2", b: "B2", c: "C2", d: "D2" },
    { id: "4", a: "A3", b: "B3", c: "C3", d: "D3" },
  ],
  columns: [
    { id: "a", title: "A" },
    { id: "b", title: "B" },
    { id: "c", title: "C", disabledForList: false },
    { id: "e", title: "E", disabledForList: true },
  ],
  fetchDocuments: jest.fn(),
  cleanFiltersData: jest.fn(),
};

const shallowDocsList = (mockProps, noStringQuery) => {
  return !noStringQuery
    ? shallow(<DocsList {...mockProps} />)
    : shallow(<DocsList {...mockProps} location={{ ...mockProps.location, search: "" }} />);
};

describe("DocsList Component", () => {
  //...
  //...
  it("should render edit search button with correct click handler", () => {
    const docsListWrapper = shallowDocsList(mockProps);
    const handelEditSearchSpy = jest.spyOn(docsListWrapper.instance(), "handelEditSearch");

    const searchButtonWrapper = docsListWrapper.find("button.edit-search-button");
    expect(searchButtonWrapper.length).toBe(1);

    searchButtonWrapper.simulate("click");
    expect(handelEditSearchSpy).toHaveBeenCalled();
  });
});

输出：

  

expect（jest.fn（））。toHaveBeenCalled（）

Expected mock function to have been called.

  at Object.it (src/scripts/components/DocsList/DocsList.test.js:62:33)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>

谢谢！