PortalHost is not working in jest ReactNative Expo ~53.0.5

[SSHristow]

PortalHost doesn't work in jest render

Description

I have a Dropdown in my app that I want to test, but I'm stuck on an issue: When I click the dropdown button, the expanded is true, but I don't see the menu items in the tests. So I created this basic example to verify the issue. Usually, I have it in the test-utils where I define all of my providers, it's a replica of my root _layout.

Reproduction

import { render, fireEvent, waitFor } from '@testing-library/react-native'
import { PortalHost } from '@rn-primitives/portal'
import { Button } from '~/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '~/components/ui/dropdown-menu'
import { Text } from '~/components/ui/text'

const TestDropdownComponent = () => {
  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button>
            <Text>Open Menu</Text>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <Text>Item 1</Text>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Text>Item 2</Text>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <PortalHost />
    </>
  )
}

describe('Portal Dropdown Test', () => {
  it('should render dropdown content', async () => {
    const screen = render(<TestDropdownComponent />)
    
    const trigger = screen.getByText('Open Menu')
    fireEvent.press(trigger)

    screen.debug()

    await waitFor(() => {
      expect(screen.getByText('Item 1')).toBeTruthy()
      expect(screen.getByText('Item 2')).toBeTruthy()
    })
  })
})

Screen debug result

 ● Portal Dropdown Test › should render dropdown content

    Unable to find an element with text: Item 1

    <View>
      <View
        accessibilityState={
          {
            "disabled": false,
            "expanded": true,  ----> //this is `true`
          }
        }
        accessible={true}
        role="button"
      >
        <Text>
          Open Menu
        </Text>
      </View>
    </View>

      48 |     screen.debug()

[mrzachnugent]

Do you have a PortalHost rendered in your tests? That is where the content will be rendered.

[vitorcamachoo]

I have the same error. Even adding PortalHost to the test wrapper, it still have the same behaviour. Here is my example:

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];

const SelectPeople = () => {
  return (
    <SelectPrimitive.Root defaultValue={undefined}>
      <SelectPrimitive.Trigger>
        <SelectPrimitive.Value placeholder="Select a person" />
      </SelectPrimitive.Trigger>
      <SelectPrimitive.Portal>
        <SelectPrimitive.Overlay style={StyleSheet.absoluteFill}>
          <SelectPrimitive.Content>
            <SelectPrimitive.ScrollUpButton />
            <SelectPrimitive.Viewport>
              <SelectPrimitive.Group>
                <SelectPrimitive.Label>Fruits</SelectPrimitive.Label>
                {people.map((person) => (
                  <SelectPrimitive.Item key={person.id} label={person.name} value={person.name}>
                    {person.name}
                    <SelectPrimitive.ItemIndicator />
                  </SelectPrimitive.Item>
                ))}
              </SelectPrimitive.Group>
            </SelectPrimitive.Viewport>
            <SelectPrimitive.ScrollDownButton />
          </SelectPrimitive.Content>
        </SelectPrimitive.Overlay>
      </SelectPrimitive.Portal>
    </SelectPrimitive.Root>
  );
};

describe('Select', () => {
  fit('opens the options list when click the trigger', async () => {
    render(<SelectPeople />, {
      wrapper: ({ children }) => (
        <View>
          {children}
          <PortalHost name="select-portal" />
        </View>
      ),
    });

    await userEvent.press(screen.getByRole('combobox', { name: /Select a person/ }));

    expect(await screen.findAllByRole('option')).toHaveLength(5);
  });
})

[vitorcamachoo]

Any update on this?