如何对材质 UI 进行集成测试<slider />带有 userEvent 或 fireEvent 的组件？

Question

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

 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

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

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

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

  slider.value = INSERT VALUE ；