In @headlessui/react, how do you mock the animations of Dialog and Transition components?

Question

In my Jest tests, I'd like to mock the animations of the Transition and Dialog components of @headlessui/react to speed up my tests. I currently just resort to await screen.findBy's to wait for the animations to end but test suite runtime is becoming a problem as I add more tests.

This is the mock I've tried so far:

jest.mock("@headlessui/react", () => ({
  Transition: ({ children, show }) => <>{show ? children : ""}</>,
}));

This works for simpler components such as:

// SimpleTransition.js
function SimpleTransition() {
  const [isShowing, setIsShowing] = useState(false);

  return (
    <div>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
        Toggle
      </button>
      <Transition
        show={isShowing}
        enter="transition-opacity duration-75"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-150"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        I will fade in and out
      </Transition>
    </div>
  );
}

But if I try it in Modal.js, it throws the ff error:

TypeError: Cannot read properties of undefined (reading 'Overlay') 
      ​​​​​at MyModal ​​​​​​src/Modal.js:15:2​
      ​​​​​at Object.<anonymous> ​​​​​​src/Modal.test.js:35:2

Modal.js uses both the Dialog and Transition components:

// Modal.js
import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useState } from "react";

export function MyModal() {
  let [isOpen, setIsOpen] = useState(false);

  function closeModal() {
    setIsOpen(false);
  }

  function openModal() {
    setIsOpen(true);
  }

  return (
    <>
      <div className="fixed inset-0 flex items-center justify-center">
        <button
          type="button"
          onClick={openModal}
          className="px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
        >
          Open dialog
        </button>
      </div>

      <Transition appear show={isOpen} as={Fragment}>
        <Dialog
          as="div"
          className="fixed inset-0 z-10 overflow-y-auto"
          onClose={closeModal}
        >
          <div className="min-h-screen px-4 text-center">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0"
              enterTo="opacity-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
            >
              <Dialog.Overlay className="fixed inset-0" />
            </Transition.Child>

            {/* This element is to trick the browser into centering the modal contents. */}
            <span
              className="inline-block h-screen align-middle"
              aria-hidden="true"
            >
              &#8203;
            </span>
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
                <Dialog.Title
                  as="h3"
                  className="text-lg font-medium leading-6 text-gray-900"
                >
                  Payment successful
                </Dialog.Title>
                <div className="mt-2">
                  <p className="text-sm text-gray-500">
                    Your payment has been successfully submitted. We’ve sent you
                    an email with all of the details of your order.
                  </p>
                </div>

                <div className="mt-4">
                  <button
                    type="button"
                    className="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
                    onClick={closeModal}
                  >
                    cancel
                  </button>
                </div>
              </div>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition>
    </>
  );
}

Here's the test:

//Modal.test.js
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom/extend-expect";
import { MyModal } from "./Modal";

// Mock IntersectionObserver
class IntersectionObserver {
  observe = jest.fn();
  disconnect = jest.fn();
  unobserve = jest.fn();
}

Object.defineProperty(window, "IntersectionObserver", {
  writable: true,
  configurable: true,
  value: IntersectionObserver,
});

Object.defineProperty(global, "IntersectionObserver", {
  writable: true,
  configurable: true,
  value: IntersectionObserver,
});

// This is what's causing the issue
jest.mock("@headlessui/react", () => ({
  Transition: ({ children, show }) => <>{show ? children : ""}</>,
}));

test("Modal Test", () => {
  render(<MyModal />);
  userEvent.click(screen.getByRole("button", { name: /open dialog/i }));
  expect(screen.getByRole("dialog")).toBeInTheDocument();
  userEvent.click(screen.getByRole("button", { name: /cancel/i }));
  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});

I've tried searching their docs and repository, but there doesn't seem to be any docs on it.

Answer 1

Hope this can help someone who is looking for a similar issue:

setupFile.ts

export const TransitionRoot = ({
  children,
  className,
  show = true,
}: {
  children: React.ReactNode;
  className: string;
  show?: boolean;
}) => (show ? <div className={className}>{children}</div> : null);

export const createReturnChildren = () => ({
  className,
  children,
}: {
  className: string;
  children: React.ReactNode;
}) => <div className={className}>{children}</div>;

setupTests.tsx

import { createReturnChildren, TransitionRoot } from './setupFile';

vi.mock('@headlessui/react', async () => {
  const original = (await vi.importActual('@headlessui/react')) as object;

  return {
    ...original,
    Dialog: Object.assign(createReturnChildren(), {
      Panel: createReturnChildren(),
    }),
    Transition: Object.assign(TransitionRoot, {
      Child: createReturnChildren(),
      Root: TransitionRoot,
    }),
  };
});