Доступ к onClick fn вложенной кнопки в Enzyme & React Hooks - PullRequest
Новая
       8

Доступ к onClick fn вложенной кнопки в Enzyme & React Hooks

3 голосов
/ 17 июня 2020

По сути, я пытаюсь проверить, открывается ли мое модальное окно при нажатии моей кнопки, и я новичок с Jest & Enzyme.

У меня проблема с доступом к реквизитам на кнопке, и я Я не уверен, потому что он вложен в сторонний пакет или я неправильно импортирую его в свой тест. Пожалуйста, посмотрите мой сокращенный (i sh) код ниже, поскольку я не собирался воссоздавать код на 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);
  });
});

Я также использую хуки, если это имеет значение ...

Любая помощь / совет приветствуются!

Спасибо

1 Ответ

0 голосов
/ 19 июня 2020

При доступе к реквизитам у меня работает следующий подход. 

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

Надеюсь, это сработает!

...