Storybook Interactions Portal Component

Portal을 사용해서 렌더링하는 컴포넌트는 play 함수의 canvasElement 내에 없기 때문에 찾을 수 없다.

따라서 @storybook/test에서 제공하는 screen을 사용해줘야 한다.

import {  expect, screen, waitFor, fireEvent, fn } from "@storybook/test";

export const Default: Story = {
    name: "모달 창 기본",
    args: {
        onClose: fn(),
        isOpen: true,
    },
    play: async ({ args, _ }) => {
        await waitFor(() => {
            expect(screen.getByTestId("close-button")).toBeInTheDocument();
        });

        const closeButton = screen.getByTestId("close-button");
        fireEvent.click(closeButton);
        expect(args.onClose).toHaveBeenCalledTimes(1);
    },
};

이렇게 해야 버튼을 찾을 수 있다.