Javascript 访问酶&；中嵌套按钮的onClick fn；反应钩

本质上，我试图测试当我的按钮被点击时，我的模态是否打开&我是一个开玩笑的人

我在访问按钮上的道具时遇到了一个问题&我不确定这是因为它嵌套在第三方包中，还是因为我没有正确地将它导入到测试中。请参阅下面我的压缩（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>
  );
};

const UploadDownloadComponent=（{handleOpen}）=>(
批量添加成员
);
//数据表组件的开头
导出常量表=（）=>{
const[bulkUpload，setBulkUpload]=useState（false）；
//上传模式
常量openUpload=（）=>{
setBulkUpload（真）；
};
const closeUpload=（）=>{
setBulkUpload（假）；
};
//查询容器
const subHeaderComponentMemo=useMemo（（）=>{
{*/其他代码/*}
返回(
);
}, []);
返回(
);
};

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);
  });
});

从“React”导入React；
从“酶”导入{configure，mount，shallow}；
从“酶-适配器-反应-16”导入适配器；
从“./components/MemberView/DataTable”导入{Table}；
从“./components/MemberView/UploadModal”导入{UploadModal}；
从“反应模态”导入模态；
配置（{adapter:newadapter（）}）；
描述（“，（）=>{
const wrapper=mount（）；
//使用.upDate（）是我通过此测试的唯一方法
它（“应该有上传按钮”，（）=>{
const uploadButton=wrapper.find（“#批量添加按钮”）.update（）；
expect（uploadButton）.toHaveLength（1）；
});
//这过去了
它（“呈现上传模式”，（）=>{
常量upModal=浅（）；
expect（upModal.find（Modal））.toHaveLength（1）；
});
它（“状态更改时打开上载模式”，（）=>{
const modal=mount（）；
expect（modal.find（modal.prop）（“isOpen”）.toBe（false）；
const uploadButton=wrapper.find（“#批量添加按钮”）.update（）；
expect（uploadButton.length）.toEqual（1）；
//这就是我的测试失败的地方，因为它无法模拟单击uploadButton
上传按钮。模拟（“点击”）；
//如果我将其更改为：
wrapper.find（“#批量添加按钮”）.simulate（“单击”）
//我的错误消息说应该找到1个节点）。
//我没走这么远
expect（modal.find（modal.prop）（“isOpen”）.toBe（true）；
});
});

如果有什么不同的话，我也在用钩子

欢迎提供任何帮助/建议

---

谢谢

在访问道具时，以下方法对我很有效

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

希望这能奏效