'How can I use the react testing library to test the style characteristics of an range input?

I need to get the styles of the input range-slider in javascript so i can test it.

I have made a range slider component which accepts different style properties and adding those to the: input[type="range"]::-webkit-slider-runnable-track style.

And i want to test so the styles on input[type="range"]::-webkit-slider-runnable-track is the styles i pass down to the component. But i have not found any way to get the styles of the input[type="range"]::-webkit-slider-runnable-track.

A pseudo example to test this would be:

const el = document.querySelector('input[type="range"]')
expect(el).toHaveStyle("background-image": "the prop style")

The component looks like this:

       const Input = (props) => {
       return (
        <>
        <style>{generateStyles(props)}</style>
        <input
         data-testid="rangeSliderID"
         type="range" />
        </>
)}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source