0

I have a react component I would like to do a unit test on. I keep getting an error: "The given element does not have a value setter"

Here is my code:

/slider.js

...
<Slider
    id = {title+"slider"}
    className = "slider"
    value={typeof value === 'number' ? value : 0}
    onChange={handleSliderChange}
    aria-labelledby="input-slider"
    min = {min} max = {max} step = {step}
    />

/slider.test.js

import React from "react";
import {render, fireEvent, cleanup} from "@testing-library/react"
import InputSlider from '../Components/slider'

afterEach(cleanup);

describe("move slider changes value", () =>{
  let sliderElement;
  const mymin = 0;
  const mymax = 100;
  const myval = 100
  const title = "mytitle"
  beforeEach(() => {
    const {container} = render(
      <InputSlider
        min = {mymin}//maybe??
        max = {mymax}
        val = {myval}
        title = {title}
      />
    );
    sliderElement = container.querySelector(".slider");
  });
  test("value greater than max", () => {
    fireEvent.change(sliderElement,{
      target:{value:101}
    });
    expect(sliderElement.value).toBe(mymax);
  });
});

I think the issue is with fireEvent.change line.

theastronomist
  • 568
  • 3
  • 18

0 Answers0