Hallo, ich bin neu im Bereich Unit-Tests. Ich habe eine Komponente, die eine Liste von Produkten rendert und diese Listen anzeigt. Ich habe in dieser Komponente auch eine Funktion, um diese Produkte nach Preisklasse zu filtern. Ich verwende ReactSlider, der im Grunde zwei Statusvariablen „priceFrom“ und „priceTo“ aktualisiert, und wenn sich diese Statusvariablen ändern, löse ich eine Funktion aus, die die Produkte basierend auf diesen Preisen filtert. Deshalb wollte ich im Scherz eine ähnliche Funktionalität testen. Kann man Witze machen? Wenn ja, wie kann ich dies erreichen, und wenn nicht, welche Alternative kann ich nutzen, um Unit-Tests dieser Komponente durchzuführen. Danke. Der Code für diese Komponente lautet wie folgt. Beachten Sie, dass im folgenden Code die FunktionfilterItemdie Produkte filtert und die Benutzeroberfläche aktualisiert, wenn derReactSlidereinen Wert aktualisiert.

import React, { useEffect, useState, useContext } from "react"; import { useParams } from "react-router-dom"; import styles from './productsList.module.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSpinner } from '@fortawesome/free-solid-svg-icons'; import Backdrop from "../../Others/Backdrop/backdrop"; import Modal from '../../Others/Modal/modal'; import ReactPaginate from 'react-paginate'; import ReactSlider from 'react-slider'; import { disableScroll } from "../../Others/HelperFunction/helperFunction"; import { ContextProvider } from "../../Others/AuthContext/authContext"; import './slider.css'; const ProductsList = () => { const context = useContext(ContextProvider); const productId = useParams().productId; const [sidebar, setSidebar] = useState(false); const [backdrop, setBackdrop] = useState(false); const [products, setProducts] = useState([]); const [filteredProducts, setFilteredProducts] = useState([]); const [error, setError] = useState(false); const [status, setStatus] = useState(''); const [modal, setModal] = useState(false); const [priceFrom, setPriceFrom] = useState(0); const [priceTo, setPriceTo] = useState(10000); const [itemOffset, setItemOffset] = useState(0); const [itemNotFound, setItemNotFound] = useState(false); const itemPerPage = 9; const endOffset = itemOffset + itemPerPage; let pageCount = 0; if (filteredProducts.length){ pageCount = Math.ceil(filteredProducts.length / itemPerPage); } else { pageCount = Math.ceil(products.length / itemPerPage); } const handlePageClick = (event) => { if (filteredProducts.length){ const newOffset = (event.selected * itemPerPage) % filteredProducts.length; setItemOffset(newOffset); } else { const newOffset = (event.selected * itemPerPage) % products.length; setItemOffset(newOffset); } } useEffect(() => { window.scrollTo(0, 0); if (context.data !== undefined){ const product = context.data[productId] !== undefined ? context.data[productId] : []; if (product.length){ setProducts(product); setStatus('success'); } else { setStatus('not found'); } } }, [context.data] ); useEffect(() => { window.scrollTo(0, 0); }, [itemOffset, filteredProducts.length]); useEffect(() => { if (backdrop){ disableScroll(); } else { window.onscroll = () => { } } }, [backdrop]) let defaultView = Array.from(Array(12).keys()).map(item => { return 
 
  
 
 
 
 }); if (products.length){ if (!itemNotFound && filteredProducts.length){ defaultView = filteredProducts.slice(itemOffset, endOffset).map(item => { return 
  
  
 
{item.name}
 
৳{item.price}
  
 }); } else if (itemNotFound) { defaultView = 
 
Nothing found based on your range
 
 } else { defaultView = products.slice(itemOffset, endOffset).map(item => { return 
  
  
 
{item.name}
 
৳{item.price}
  
 }); } } else if(status === 'not found') { defaultView = 
 
Nothing found
 
 } const filterItem = () => { if (priceFrom && priceTo) { const filteredData = products.filter(item => Number(item.price) >= priceFrom && Number(item.price) <= priceTo); if (filteredData.length){ setItemNotFound(false) setFilteredProducts(filteredData); setSidebar(false); setBackdrop(false); } else { setItemNotFound(true); setItemOffset(0); setSidebar(false); setBackdrop(false); } } } const resetFilter = () => { setPriceFrom(0); setPriceTo(1000); setFilteredProducts([]); } const openSidebar = () => { if (!sidebar){ setSidebar(true); setBackdrop(true); } } const closeSidebar = () => { if (sidebar){ setSidebar(false); setBackdrop(false); } else { setBackdrop(false); } } let displayStatus = 
 
Something went wrong
 
Please try again
  { setModal(false); }}>Ok 
 if (status === 'database error'){ displayStatus = 
 
Database error
 
Please try again or contact the admin
  { setError(false); setStatus(''); setModal(false); }}>Ok 
 } return ( <>   {displayStatus}  
 
 
 
Show Sidebar
 
 
 
 
Categories
 
 
Bracelets 
Finger Rings 
Ear Rings 
Necklace 
Toe Ring 
Others 
 
 
 
Price Range
  `Thumb value ${state.valueNow}`} renderThumb={(props, state) => 
{state.valueNow}
} minDistance={1} onChange={([v1, v2]) => { setPriceFrom(v1); setPriceTo(v2); }} pearling /> Reset = priceTo)} className={styles.filterBtn} onClick={filterItem}>Apply 
 
 
 
{products.length ? products[0].category : null}
 
 {defaultView} 
 
 
  
  ) } export default ProductsList;