如何使用 userEvent 或 fireEvent 对 Material UI <Slider /> 组件进行集成测试？

Question

我一直在努力尝试对材质 UI 组件进行集成测试。我可以定位滑块，但未能成功移动滑块并找到新值。您对如何与该组件进行交互并测试该交互有任何指导吗？

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, )
  });
});

Answer 1

我没有这方面的经验，但你可以尝试一下：

• 检查滑块上的元素并检查值是如何存储在 html 标记中的。

• 如果正在使用属性值，也许您可​​以尝试：

  slider.value = INSERT VALUE;