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.