How to trigger Select from component testing ( unit testing ) using Testing Library?

[alamenai]

I have this Select component:

 <Select
                    value={field.value}
                    onValueChange={(value: typeof field.value) => {
                      field.onChange(value)
                      if (value !== "H0") {
                        setSelectedHouseholdTotalMembers(null)
                      }
                    }}
                  >
                    <SelectTrigger id='load-profile' className='h-11 relative' data-testid='select'>
                      <SelectValue placeholder='Select' />
                    </SelectTrigger>
                    <SelectContent className='rounded-2xl relative'>
                      {standardLoadProfilesOptions.map(({ option, profile }) => (
                        <SelectItem
                          key={option}
                          value={profile}
                          className={cx("h-11", profile === field.value && "font-semibold text-2x")}
                          data-testid={profile}
                        >
                          <div className='w-full justify-between'>
                            {option}
                            <Badge
                              variant='outline'
                              className={cx("absolute right-10", profile === field.value && "bg-blue-600 text-white")}
                            >
                              {profile}
                            </Badge>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>

As you see in the code above, I have assigned a data-testid with select for Select component and profile for SelectItem.

Now, I have this component testing using Testing Library and Vitest:

import { render } from "@/__test-utils__/custom-render"
import { fireEvent, screen } from "@testing-library/react"
import mockRouter from "next-router-mock"
import { AppRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime"
import { describe, expect, it } from "vitest"

import { ElectricityConsumptionForm } from "../components/form"

describe("ElectricityConsumptionForm", () => {
  it("should update electricity requirements value when a household total members carousel item is selected", async () => {
    // Set the window width to simulate a large screen
    Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: 1024 })
    window.dispatchEvent(new Event("resize"))

    render(
      <AppRouterContext.Provider value={mockRouter as any}>
        <ElectricityConsumptionForm />
      </AppRouterContext.Provider>
    )

    screen.debug()
    // Open the dialog by clicking the button
    const openButton = screen.getByTestId("edit-electricity-btn") // Ensure the test ID matches the rendered element
    fireEvent.click(openButton)

    // Select the H0 option from the select dropdown
    const loadProfileSelect = await screen.findByTestId("select")
    fireEvent.mouseDown(loadProfileSelect) // Open the select dropdown

    const option = await screen.findByTestId("H0")
    fireEvent.click(option) // Select the H0 option

    // // Wait for the carousel items to be rendered
    // Const firstCarouselItem = await screen.findByTestId("household-total-member-0") // Access the first item
    // FireEvent.click(firstCarouselItem)

    // // Get the electricity requirements input
    // Const electricityInput = await screen.findByLabelText("Geben Sie Ihren jährlichen Stromverbrauch ein")

    // // Check if the value is updated according to the first carousel item selection
    // Expect(electricityInput).toHaveValue("1500")
  })
})

But it seems the Select component is not triggered because the options are not appeared in the screen.

[mateusp7]

same problem here

[mateusp7]

Try this in your setup.test

class MockPointerEvent extends Event {
  button: number;
  ctrlKey: boolean;
  pointerType: string;

  constructor(type: string, props: PointerEventInit) {
    super(type, props);
    this.button = props.button || 0;
    this.ctrlKey = props.ctrlKey || false;
    this.pointerType = props.pointerType || 'mouse';
  }
}

window.PointerEvent = MockPointerEvent as any;
window.HTMLElement.prototype.scrollIntoView = jest.fn();
window.HTMLElement.prototype.releasePointerCapture = jest.fn();
window.HTMLElement.prototype.hasPointerCapture = jest.fn();