ЯсноПонятно24

import { ChangeEvent, useState } from "react"; import { TProduct } from "../../types"; import { generateProductText } from "../../utils/utils"; import s from "./product-list.module.css"; type TProductListProps = { products: Array<TProduct>; onDelete: (product: TProduct) => void; }; export const ProductList = ({ products, onDelete }: TProductListProps) => { const [fontSize, setFontSize] = useState(16); const handleChange = (e: ChangeEvent<HTMLInputElement>) => { setFontSize(+e.target.value); }; const handleClick = () => { onDelete(products[products.length - 1]); }; return ( <div className={s.container}> <ul className={s.list}> {products.map((product) => ( <p className={s.product} style={{ fontSize: `${fontSize}px` }} key={product.id} > {generateProductText(product)} </p> ))} </ul> <label htmlFor="font-size">Размер шрифта:</label> <input id="font-size" type="range" min={14} max={20} step={1} value={fontSize || 14} onChange={handleChange} /> <button className={s.button} onClick={handleClick}> Удалить последний </button> </div> ); }; Проблема с тестом , не работает it("should change font size when slider value is changed", () => { const { getByTestId, getAllByTestId } = render(<ProductList products={products} onDelete={() => {}} />); const slider = getByTestId("font-size"); fireEvent.change(slider, { target: { value: "17" } }); const productElements = getAllByTestId("product"); productElements.forEach((element) => { expect(element).toHaveStyle("font-size: 17px"); }); }); Видимо проблема в том, как достаю нужный элемент const slider = getByTestId("font-size"); , как исправить?