testing-library Error: mockConstructor(...): Nothing was returned from render

Question

I'm writing many tests but for one of them I got mockConstructor error telling me I don't render anything. (at "reconcileChildFibers": node_modules/react-dom/cjs/react-dom.development.js:14348:23))
Quite same test just before works though :/ I've just spent the day on it, don't have any more idea.

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

here is the component to test

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

and here are my 2 tests, only first one works, the second get stuck with fireEvent : Uncaught [Error: mockConstructor(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return 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

Digging on The loader was the good answer, I mocked it but forgot to make a fake return :

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