How to test Select component using jest?

[hamidbjss]

I'm trying to use jest to test the Select component, however, it keeps complaining about releasePointerCapture whenever I click on the Select trigger.

Error: Uncaught [TypeError: event.target.releasePointerCapture is not a function]

My test looks like this

  it('Can open select successfully', async () => {
    const { findByTestId } = await renderPage({});
    const dropdown = await findByTestId('mySelect');

    userEvent.type(dropdown, `{enter}`);
    const dataState = dropdown.getAttribute('aria-expanded');
    expect(dataState).toBe('true');
  });

It looks like the code that is causing this within Radix is in this file https://github.com/radix-ui/primitives/blob/main/packages/react/select/src/Select.tsx

       onPointerDown={composeEventHandlers(triggerProps.onPointerDown, (event) => {
          // prevent implicit pointer capture
          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
          (event.target as HTMLElement).releasePointerCapture(event.pointerId);

          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
          // but not when the control key is pressed (avoiding MacOS right click)
          if (event.button === 0 && event.ctrlKey === false) {
            handleOpen();
            context.triggerPointerDownPosRef.current = {
              x: Math.round(event.pageX),
              y: Math.round(event.pageY),
            };
            // prevent trigger from stealing focus from the active item after opening.
            event.preventDefault();
          }
        })}

I've managed to somewhat successfully test theDropdown component, but can't seem to get past this issue for the Select

[andy-hook]

Hey @hamidbjss with jest you'll need to a little bit of extra work to get things going. Checkout here #1382

There are some other helpful links for DropdownMenu etc here radix-ui/website#370

[hamidbjss]

Awesome, that worked, thank you @andy-hook! :D