How to check existence of portalled elements with testing libraries? #1130

seedy · 2022-02-01T11:24:15Z

seedy
Feb 1, 2022

Hi, folks! Hope you're doing well 👋

I'm using Testing-Library/React to perform integration tests in my application.

I would need to validate some internal rules where some user permissions impact what's rendered inside a DropdownMenuContent.

I need to have it portalled for my UI.

I don't use the portal utility yet.

In my DOM, I have a <div data-radix-portal > node at the end of my body, where I can see the DropdownMenuContent mounts when opened.
Hence I would have expected to look for it in my tests to find any portalled element.

I noticed that the <div data-radix-portal > node is not rendered inside my testing environment, I was wondering if you had clues about the why?

Repro

Here's my simplest repro as of now:

import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import {render} from '@testing-library/react'

const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
const DropdownMenuContent = DropdownMenuPrimitive.Content;
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
const DropdownMenuItem = DropdownMenuPrimitive.Item

  test.only('dropdown', async () => {
    const Component = () => (
      <DropdownMenu modal>
        <DropdownMenuTrigger asChild>
          <button data-testid={`button`}>
            ...
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" data-testid={`menu`}>
          <DropdownMenuGroup>
            <DropdownMenuItem>View</DropdownMenuItem>
            <DropdownMenuItem >
              Delete
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    )

    const { debug, container } = render(<Component />, {
      container: document.body,
    });

    act(() => {
      const button = getByTestId('button');
      fireEvent.click(button);
    })
    debug(container)
  })

Logs

     <body>
        <button
          aria-haspopup="menu"
          data-state="closed"
          data-testid="button"
          id="radix-id-3792579812-1"
          type="button"
        >
          ...
        </button>
      </body>

Also, what would be the best practice you'd recommend to properly manage portals inside tests?

A few moments Later...

Portal's implementation here

This specific line made me wonder whether my testing environment doesn't follow the expected structure 😕

When I jest.spyOn ReactDOM.createPortal, I see no call to it.
When I log globalThis?.document?.body, I see it is exactly equal to document.body

Test

test('dropdown', async () => {
  const portalSpy = jest.spyOn(ReactDOM, 'createPortal');

  const Component = () => (
    <DropdownMenu modal>
      <DropdownMenuTrigger asChild>
        <button data-testid={`button`}>
          ...
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" data-testid={`menu`}>
        <DropdownMenuGroup>
          <DropdownMenuItem>View</DropdownMenuItem>
          <DropdownMenuItem >
            Delete
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )

  const { getByTestId } = render(<Component />);

  act(() => {
    const button = getByTestId('button');
    fireEvent.click(button);
  })

  console.log(globalThis?.document?.body);
  console.log('equals documentBody', globalThis?.document?.body === document.body)
  screen.debug();

  console.log(portalSpy.mock.calls.length)

  await waitFor(() => {
    expect(getByTestId('menu')).toBeInTheDocument()
  })
})

Logs

console.log
    HTMLBodyElement {}

      at Object.<anonymous> (__tests__/portalled-dropdown.spec.tsx:40:11)

  console.log
    equals documentBody true

      at Object.<anonymous> (__tests__/portalled-dropdown.spec.tsx:41:11)

  console.log
    <body>
      <div>
        <button
          aria-haspopup="menu"
          data-state="closed"
          data-testid="button"
          id="radix-id-965528199-1"
          type="button"
        >
          ...
        </button>
      </div>
    </body>

vorillaz · 2022-02-01T17:58:24Z

vorillaz
Feb 1, 2022

Hey there, you can use the container option upon rendering the dropdown component
https://testing-library.com/docs/react-testing-library/api/#container

const {container} = render(<Dropdown {...props} />, {
  container: document.body,
});

6 replies

vorillaz Feb 3, 2022

You should fire a click event onto the trigger in order to see the modal popping, otherwise the portal is empty.
Regarding your question about portals, I am always in favour of mocking portals as:

beforeAll(() => {
  ReactDOM.createPortal = jest.fn((element) => {
    return element;
  });
});

afterAll(() => {
  ReactDOM.createPortal.mockClear();
});

seedy Feb 3, 2022
Author

@vorillaz good point on the fireEvent, I totally forgot 🤦

I don't think your proposal about mocking createPortal solves my issue, though.

How would I check the content of my dropdown then ?

By the way, you should check the signature of createPortal, it expects 2 params:

function createPortal(children: React.ReactNode, container: Element, key?: string): React.ReactPortal

seedy Feb 3, 2022
Author

I just noticed that spying on ReactDOM.createPortal doesn't help here:


  const portalSpy = jest.spyOn(ReactDOM, 'createPortal');

  const { debug, container, getByTestId } = render(<Component />, {
    container: document.body,
  });

  act(() => {
    const button = getByTestId('button');
    fireEvent.click(button);
  })
  expect(portalSpy).toHaveBeenCalled()

Received number of calls: 0

vorillaz Feb 3, 2022

So, that was a sample as a reference. In theory you should follow a strategy that suits your use case scenarios and the idea behind your testing strategy.
In a nutshell, a combination of Jest and react-testing-library runs on top of JSDom which mimics the browser's environment. Dropdowns and other UI elements are bound with UI interactions and they are tighten to specific behaviors: once you click outside of a dropdown the contents are removed from the DOM.

Jest on the other hand can run multiple tests in parallel, thus you may encourage multiple dropdowns mounted at the same time on the DOM as the suite is running.

Using mocking you can pass along the rendered components and validate your logic.
facebook/react#11565 (comment)

seedy Feb 3, 2022
Author

@vorillaz
My testing strategy is to check rendered elements inside my DOM. Sorry if that was not clear enough from the start.

I am mentionning the fact that I want to check the content of my portal.

I am using @testing-library to that end

As you can see from my initial question, my goal is to understand why Radix-UI's portal is not rendered inside my DOM and find a way to render it inside the said DOM.

Eddiejjay · 2022-05-05T08:55:38Z

import { render, screen } from '@testing-library/react'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './DropdownMenu'
import userEvent from '@testing-library/user-event'

describe('DropdownMenu', () => {
  it('renders the trigger', () => {
    render(
      <DropdownMenu>
        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Item 1</DropdownMenuItem>
          <DropdownMenuItem>Item 2</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>,
    )

    expect(screen.getByText('Open Menu')).toBeInTheDocument()
  })

  it('renders the items when trigger is clicked', async () => {
    const user = userEvent.setup()

    render(
      <DropdownMenu>
        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Item 1</DropdownMenuItem>
          <DropdownMenuItem>Item 2</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>,
    )

    await user.click(screen.getByText('Open Menu'))
    expect(screen.getByText('Item 1')).toBeInTheDocument()
    expect(screen.getByText('Item 2')).toBeInTheDocument()
  })
})

imshubhamsingh · 2024-07-18T08:25:41Z

imshubhamsingh
Jul 18, 2024

Mocking the portal worked for me for Dialog and dropdown. We just wanted to check the functionality of the component as to what all get renders inside portal. Below is the mock:

import { forwardRef } from "react";

import { PortalProps } from "@radix-ui/react-portal";

jest.mock("@radix-ui/react-portal", () => ({
  ...jest.requireActual("@radix-ui/react-portal"),
  Portal: forwardRef<HTMLDivElement, PortalProps>(function PortalMock(props, ref) {
    return <>{props.children}</>;
  }),
}));

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to check existence of portalled elements with testing libraries? #1130

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Logs

Test

Logs

Replies: 3 comments 16 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to check existence of portalled elements with testing libraries? #1130

Logs

A few moments Later...

Test

Logs

Replies: 3 comments · 16 replies

seedy Feb 3, 2022 Author

seedy Feb 3, 2022 Author

seedy Feb 3, 2022 Author

Replies: 3 comments 16 replies

seedy Feb 3, 2022
Author

seedy Feb 3, 2022
Author

seedy Feb 3, 2022
Author