访问 Enzyme & React Hooks 中嵌套按钮的 onClick fn答案

【问题标题】：Accessing onClick fn of a nested button in Enzyme & React Hooks访问 Enzyme & React Hooks 中嵌套按钮的 onClick fn
【发布时间】：2020-10-06 16:11:31
【问题描述】：

基本上，我正在尝试测试当我的按钮被点击时我的模态是否打开并且我是 Jest & Enzyme 的菜鸟。

我在访问按钮上的道具时遇到问题，我不确定是因为它嵌套在第三方包中，还是我没有将它正确导入到我的测试中。请在下面查看我的浓缩（ish）代码，因为我不打算在 CodePen 上重新创建代码。

DataTable.jsx

const UploadDownloadComponent = ({ handleOpen }) => (
  <UploadDownloadButtonContainer>
    <PrimaryButton
      id="bulk-add-button"
      onClick={handleOpen} //this is what I need to access
    >
      Bulk Add Members
    </PrimaryButton>
    <SecondaryButton id="email-csv-button">
    </SecondaryButton>
  </UploadDownloadButtonContainer>
);

//beginning of data table component
export const Table = () => {
  const [bulkUpload, setBulkUpload] = useState(false);

  //upload modal
  const openUpload = () => {
    setBulkUpload(true);
  };
  const closeUpload = () => {
    setBulkUpload(false);
  };

  //query container
  const subHeaderComponentMemo = useMemo(() => {
    {*/ other code /*}

    return (
      <div>
        <UploadDownloadComponent
          handleOpen={openUpload}
          bulkUpload={bulkUpload}
        />
      </div>
    );
  }, []);


  return (
    <React.Fragment>
      <DataTable
        {*/ bunch of other things unrelated /*}
        subHeaderComponent={subHeaderComponentMemo}
      />
      <UploadModal closeModal={closeUpload} open={bulkUpload} />
    </React.Fragment>
  );
};

DataTable.test.js

import React from "react";
import { configure, mount, shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { Table } from "../components/MemberView/DataTable";
import { UploadModal } from "../components/MemberView/UploadModal";
import Modal from "react-modal";

configure({ adapter: new Adapter() });

describe("<Table />", () => {

  const wrapper = mount(<Table />);

  //using .upDate() is the only way I can get this test to pass
  it("should have upload button", () => {
    const uploadButton = wrapper.find("#bulk-add-button").update();
    expect(uploadButton).toHaveLength(1);
  });

  //this passes
  it("renders Upload Modal", () => {
    const upModal = shallow(<UploadModal />);
    expect(upModal.find(Modal)).toHaveLength(1);
  });


  it("opens Upload Modal when state is changed", () => {
    const modal = mount(<UploadModal />);

    expect(modal.find(Modal).prop("isOpen")).toBe(false);

    const uploadButton = wrapper.find("#bulk-add-button").update();
    expect(uploadButton.length).toEqual(1);

    //this is where my test fails as it cannot simulate click on uploadButton
    uploadButton.simulate("click");

    //if I change it to: 
    wrapper.find("#bulk-add-button").simulate("click')
    //my error message says it expected 1 Node. ) found instead.

    //I don't make it this far
    expect(modal.find(Modal).prop("isOpen")).toBe(true);
  });
});

如果这有什么不同的话，我也在使用 Hooks...

欢迎任何和所有帮助/建议！

谢谢

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

访问道具时，以下方法对我有用。

expect(modal.find(Modal).props().isOpen).toBe(false);

希望这行得通！

【讨论】：