Jest에서 구성요소 기능을 테스트하는 방법
안녕하세요, 저는 단위 테스트를 처음 접했습니다. 제품 목록을 렌더링하고 해당 목록을 표시하는 구성 요소가 있습니다. 또한 이 구성요소에는 이러한 제품을 가격대별로 필터링하는 기능도 있습니다. 나는 기본적으로 두 개의 상태 변수 "priceFrom"과 "priceTo"를 업데이트하는 ReactSlider를 사용하고 있으며 이러한 상태 변수가 변경되면 해당 가격을 기준으로 제품을 필터링하는 함수를 트리거합니다. 그래서 비슷한 기능을 농담으로 테스트해보고 싶었습니다. 농담이 가능한가요? 그렇다면 이를 어떻게 달성할 수 있으며, 그렇지 않은 경우 이 구성 요소의 단위 테스트를 수행하기 위해 어떤 대안을 취할 수 있습니까? 감사해요. 이 구성 요소의 코드는 다음과 같습니다. 아래 코드에서 ReactSlider가 값을 업데이트하면 filterItem 함수가 제품을 필터링하고 UI를 업데이트합니다.
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 <div key={item} className={styles.defaultItemContainer} id={styles.loader}>
<div className={styles.defaultItemImgContainer}>
<FontAwesomeIcon icon={faSpinner} spinPulse className={styles.spinnerPulse} />
</div>
<div className={styles.loadingName}></div>
<div className={styles.loadingLink}></div>
</div>
});
if (products.length){
if (!itemNotFound && filteredProducts.length){
defaultView = filteredProducts.slice(itemOffset, endOffset).map(item => {
return <div key={item._id} className={styles.productsContainer} id={styles.loader}>
<a href={`/products/${productId}/${item.name}`} className={styles.productsLink}>
<div className={styles.productsImgContainer}>
<img src={item.img[0]} alt={item.name} className={styles.productsImg}/>
</div>
<div className={styles.productsName}>{item.name}</div>
<div className={styles.productsPrice}>৳{item.price}</div>
</a>
</div>
});
}
else if (itemNotFound) {
defaultView = <div className={styles.notFoundContainer}>
<h2 className={styles.notFoundHeader}>Nothing found based on your range</h2>
</div>
}
else {
defaultView = products.slice(itemOffset, endOffset).map(item => {
return <div key={item._id} className={styles.productsContainer} id={styles.loader}>
<a href={`/products/${productId}/${item.name}`} className={styles.productsLink}>
<div className={styles.productsImgContainer}>
<img src={item.img[0]} alt={item.name} className={styles.productsImg}/>
</div>
<div className={styles.productsName}>{item.name}</div>
<div className={styles.productsPrice}>৳{item.price}</div>
</a>
</div>
});
}
}
else if(status === 'not found') {
defaultView = <div className={styles.fallbackContainer}>
<h2 className={styles.fallbackHeader}>Nothing found</h2>
</div>
}
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 = <div className={styles.statusMsgContainer}>
<h2 className={styles.statusMsgHeader}>Something went wrong</h2>
<p className={styles.statusMsgP}>Please try again</p>
<button className={styles.statusMsgBtn} onClick={() => {
setModal(false);
}}>Ok</button>
</div>
if (status === 'database error'){
displayStatus = <div className={styles.statusMsgContainer}>
<h2 className={styles.statusMsgHeader}>Database error</h2>
<p className={styles.statusMsgP}>Please try again or contact the admin</p>
<button className={styles.statusMsgBtn} onClick={() => {
setError(false);
setStatus('');
setModal(false);
}}>Ok</button>
</div>
}
return (
<>
<Backdrop backdrop={ backdrop } toggleBackdrop={ closeSidebar }/>
<Modal modal={modal}>
{displayStatus}
</Modal>
<div className={styles.productsListMain}>
<div className={styles.productsListContainer}>
<div className={styles.sidebarSwitcher} onClick={ openSidebar }>
<p className={styles.sidebarSwitcherP}>Show Sidebar</p>
</div>
<div className={ sidebar ? `${styles.sidebarContainer} ${styles.on}` : styles.sidebarContainer}>
<div className={styles.categoryType}>
<h2 className={styles.categoryH2}>Categories</h2>
<ul className={styles.sidebarLists}>
<a href="/products/Bracelet" className={styles.sidebarLink}><li className={productId === 'Bracelet' ? `${styles.sidebarList} ${styles.active}` : styles.sidebarList}>Bracelets</li></a>
<a href="/products/Finger Ring" className={styles.sidebarLink}><li className={productId === 'Finger Ring' ? `${styles.sidebarList} ${styles.active}` : styles.sidebarList}>Finger Rings</li></a>
<a href="/products/Ear Ring" className={styles.sidebarLink}><li className={productId === 'Ear Ring' ? `${styles.sidebarList} ${styles.active}` : styles.sidebarList}>Ear Rings</li></a>
<a href="/products/Necklace" className={styles.sidebarLink}><li className={productId === 'Necklace' ? `${styles.sidebarList} ${styles.active}` : styles.sidebarList}>Necklace</li></a>
<a href="/products/Toe Ring" className={styles.sidebarLink}><li className={productId === 'Toe Ring' ? `${styles.sidebarList} ${styles.active}` : styles.sidebarList}>Toe Ring</li></a>
<a href="/products/Other" className={styles.sidebarLink}><li className={productId === 'Other' ? `${styles.sidebarList} ${styles.active}` : styles.sidebarList}>Others</li></a>
</ul>
</div>
<div className={styles.categoryType} id={styles.categoryType2}>
<h2 className={styles.categoryH2}>Price Range</h2>
<ReactSlider
max={10000}
className="horizontal-slider"
thumbClassName="example-thumb"
trackClassName="example-track"
value={[priceFrom, priceTo]}
ariaLabel={['Lower thumb', 'Upper thumb']}
ariaValuetext={state => `Thumb value ${state.valueNow}`}
renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
minDistance={1}
onChange={([v1, v2]) => {
setPriceFrom(v1);
setPriceTo(v2);
}}
pearling
/>
<button disabled={!priceFrom || !priceTo}
className={styles.filterBtn}
onClick={ resetFilter }>Reset</button>
<button disabled={(!priceFrom || !priceTo) || (priceFrom >= priceTo)}
className={styles.filterBtn}
onClick={filterItem}>Apply</button>
</div>
</div>
<div className={styles.ProductsLists}>
<h2 className={styles.productHeader}>{products.length ? products[0].category : null}</h2>
<div className={styles.productsDisplayContainer}>
{defaultView}
</div>
</div>
</div>
<ReactPaginate breakLabel="..."
nextLabel=">"
className={styles.paginationContainer}
pageClassName={styles.paginationItem}
previousClassName={styles.previousItem}
nextClassName={styles.nextItem}
activeClassName={styles.paginationActive}
disabledClassName={styles.paginationDisabled}
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={itemNotFound ? 0 : pageCount}
previousLabel="<"
renderOnZeroPageCount={null}/>
</div>
</>
)
}
export default ProductsList;