How to test a value of a Slider with Vitest and React Testing LIbrary ?

[alamenai]

Hi,

I created a component test where I would test the value of prop in a Slider component:

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

import { store } from "@/redux/store"

import { PanelMeasuresSliders, sliders } from "../components/panel-measures/sliders"
import { PanelMeasures, updatePanelMeasures } from "../state/slice"

const defaultDimensions: PanelMeasures = {
  border: 0.02,
  distance: 0.02,
  width: 1.13,
  length: 1.76,
  neighborSpace: 0,
  obstructionSpace: 0.02,
}

vi.mock("next/navigation", () => ({
  useParams: vi.fn(() => ({ id: "17457534" })),
}))

describe("Panel Measures Sliders Component", () => {
  store.dispatch(updatePanelMeasures(defaultDimensions))

  it("should render sliders with correct default values", async () => {
    render(
      <AppRouterContext.Provider value={mockRouter as any}>
        <Provider store={store}>
          <PanelMeasuresSliders />
        </Provider>
      </AppRouterContext.Provider>
    )

    sliders.forEach(({ valueKey }, index) => {
      const slider = screen.getByTestId(`dimension-slider-${index}`)
      const label = screen.getByTestId(`dimension-label-${index}`)

      const expectedValue = defaultDimensions[valueKey as keyof PanelMeasures]?.toString().replace(".", ",")

      const actualLabelContent = label.textContent

      // Check the slider's value prop
      expect(slider).toHaveAttribute("value", `[${expectedValue}]`)
      // Check the label content
      expect(actualLabelContent).toBe(expectedValue) // This passed
    })
  })
})

While the test ensures that the values are defined in the label but the when it comes to the value property in the the Slider it says that value is null!

Slider

 {sliders.map(({ label, valueKey, min, max, step }, index) => (
              <Card key={valueKey} className='rounded-xl'>
                <CardContent className='flex flex-col p-0 px-4 pt-4 pb-6'>
                  <span className='flex justify-between items-baseline'>
                    <span className='flex items-center'>
                      <Label className='mr-1'>{label}</Label>
                    </span>
                    <p className='text-lg font-semibold align-sub'>
                      <span data-testid={`dimension-label-${index}`}>
                        {measures[valueKey as keyof PanelMeasures]?.toString().replace(".", ",")}
                      </span>
                      <span className='text-sm text-slate-500 ml-1'>m</span>
                    </p>
                  </span>
                  <Slider
                    min={min}
                    max={max}
                    step={step}
                    value={[measures[valueKey as keyof PanelMeasures]]}
                    onValueChange={(val: number[]) => handleNumberInputChange(valueKey, val)}
                    className='cursor-pointer mt-3'
                    data-testid={`dimension-slider-${index}`}
                  />
                  {valueKey === "distance" && (
                    <CardDescription className='mt-3 text-[13px]'>
                      Dieser Parameter hat nur Auswirkungen auf Steildächer.
                    </CardDescription>
                  )}
                </CardContent>
              </Card>
            ))}