'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 |
---|