You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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"importmockRouterfrom"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 screenObject.defineProperty(window,"innerWidth",{writable: true,configurable: true,value: 1024})window.dispatchEvent(newEvent("resize"))render(<AppRouterContext.Providervalue={mockRouterasany}><ElectricityConsumptionForm/></AppRouterContext.Provider>)screen.debug()// Open the dialog by clicking the buttonconstopenButton=screen.getByTestId("edit-electricity-btn")// Ensure the test ID matches the rendered elementfireEvent.click(openButton)// Select the H0 option from the select dropdownconstloadProfileSelect=awaitscreen.findByTestId("select")fireEvent.mouseDown(loadProfileSelect)// Open the select dropdownconstoption=awaitscreen.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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I have this Select component:
As you see in the code above, I have assigned a
data-testid
withselect
for Select component andprofile
for SelectItem.Now, I have this component testing using Testing Library and Vitest:
But it seems the Select component is not triggered because the options are not appeared in the screen.
Beta Was this translation helpful? Give feedback.
All reactions