How to do an integration test for a material UI <Slider /> component with userEvent or fireEvent?

user_13955349 0
Viewed 447

I have been struggling trying to do an integration test on a material UI component. I can target the slider, but have not successfully been able to move the slider and find the new value. Do you have any guidance on how to interact with this component and test that interaction?

import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";
import { MemoryRouter } from "react-router-dom";
import { Slider } from "@material-ui/core";

import SearchForm from "./SearchForm";

describe("SearchForm interaction", () => {
  it("should change value if slider is moved", () => {
    const minValue = 1;
    const maxValue = 8;
    const currentValue = 4;
    render(
      <Slider
        className="slider"
        min={minValue}
        max={maxValue}
        value={currentValue}
        onChange={jest.fn()}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        data-testid="numPlayer-slider"
      />
    );
    const slider = screen.getByTestId("numPlayer-slider");
    //userEvent.click(slider, )
  });
});

material-ui jestjs reactjs unit-testing javascript
1 Answers

I have no experience with this, but something you could try is:

  • Inspect element on a slider and check how values are stored in the html tag.

  • If property value is being used perhaps you can try:

    slider.value = INSERT VALUE;

user_149669310
Related