javascript - 测试库错误 : mockConstructor(. ..):渲染没有返回任何内容

Question

我正在编写许多测试，但对于其中一个测试，我收到了模拟构造函数错误，告诉我我没有渲染任何内容。 (在“reconcileChildFibers”:node_modules/react-dom/cjs/react-dom.development.js:14348:23))
不过，在工作之前进行了完全相同的测试:/我刚刚花了一天时间，没有更多的想法。

"@testing-library/jest-dom": "^4.2.4",
"@testing-library/user-event": "^7.1.2",
"react-dom": "^16.13.1",

这是要测试的组件

const DeleteModal: React.FC<IDMProps> = ({ out, setOut, deleteModal, setDeleteModal, name, externalId }) => {
  const [sending, setSending] = React.useState<boolean>(false);

  const handleDelete = async (e: React.FormEvent) => {
    e.preventDefault();
   ...
    setTimeout(() => {
      ...
    }, 300);
  }

  return (
    <div className="modal light">
      <div className={out ? "delete-modal out" : "delete-modal"} >
        <div className="flex-end">
          <FontAwesomeIcon icon="times" size="2x" color="#e9e4dd" className="cursor"
            onClick={() => setDeleteModal(!deleteModal)} />
        </div>
        <div className="p-30">
          <p>Are you sure you want to</p>
          <p>delete the reward</p>
          <p>{name.toUpperCase()} ?</p>
          <button data-testid="button" onClick={handleDelete}>
            {sending ?
              <Loader type="ThreeDots" color="white" height="20" width="20" />
              :
              "YES DELETE"
            }
          </button>
        </div>
      </div>
    </div>
  );
};

这是我的两个测试，只有第一个有效，第二个被 fireEvent : Uncaught [错误:mockConstructor(...): 渲染没有返回任何内容。这通常意味着缺少返回语句。或者，若不渲染任何内容，则返回 null。]

describe("delete modal as a forms component", () => {

  it("should leave modal when clicking on right cross", async () => {
    const { getByText } = render(
      <DeleteModal
        out={false} setOut={setOut}
        deleteModal={true} setDeleteModal={setDeleteModal}
        name={name} externalId={externalId} />
    );
    getByText("BEAUTY ?"); // OK
    getByText("YES DELETE"); // OK
    await act(async () => {
      fireEvent.click(document.getElementsByClassName('cursor')[0]); // OK
    });
    expect(...)
  });

  it("when clicking on button, should delete reward, adding 'out' className for animation purpose then leave modal", async () => {
    const { getByText, getByTestId } = render(
      <DeleteModal
        out={false} setOut={setOut}
        deleteModal={true} setDeleteModal={setDeleteModal}
        name={name} externalId={externalId} />);
    getByText("YES DELETE"); // OK
    await act(async () => {
      fireEvent.click(getByText("YES DELETE")); //Error
      fireEvent.click(getByTestId("button")); //also Error
    });
    expect(...)
  });
});

Answer 1

挖掘装载机是一个很好的答案，我 mock 了它，但忘了做一个假返回:

jest.mock('react-loader-spinner', () => {
  return {
    __esModule: true,
    A: true,
    default: () => {
      return <div>This is the loader</div>;
    },
  }
});