increase test coverage for react files

For example :

import { classNamesHelper } from '@archibald/client';
import CategoryName from '@components/atoms/category-name/CategoryName';
import Icon from '@components/atoms/icon/Icon';
import Link, { LinkType } from '@components/atoms/link/Link';
import ShowMoreButton from '@components/atoms/show-more/ShowMoreButton';
import Classes from '@components/organisms/product-listing/facets/category/tree/item/CategoryItem.scss';
import { getSearchPathObject } from '@helpers/search';
import { CategoryHierarchy } from '@interfaces/base/category';

import { IconType } from '@constants';
import { useState } from 'react';

interface ICategoryItem {
category: CategoryHierarchy;
currentCategoryId: string;
currentTotal: number;
parentCategoryUrl?: string;
parentCategoryQuery?: string;
level?: number;
}

function CategoryItem({ category, currentCategoryId, currentTotal, parentCategoryUrl, parentCategoryQuery, level = 0 }: ICategoryItem) {
const hasSubCategories = !!category?.subcategories?.length;

const isCurrent = category.id === currentCategoryId;

const categoryClasses = classNamesHelper([Classes.categoryItemContainer, (hasSubCategories || isCurrent) && Classes.active]);
const subCategoryClasses = classNamesHelper([parentCategoryUrl && Classes.padding, Classes.subCategories]);
const showMore = !!(category?.subcategories && category?.subcategories?.length > 4) && level >= 1;
const [isCollapsed, setIsCollapsed] = useState(!showMore);
const showCounter = (!category.isFacet && isCurrent) || (category.isFacet && !hasSubCategories);

const subcategories = isCollapsed && showMore ? category?.subcategories?.slice(0, 4) : category?.subcategories;

function collapse() {
setIsCollapsed(!isCollapsed);
}

return (
<div className={Classes.categoryItem} data-testid="category-item" data-active={isCurrent ? true : undefined}>
<div className={categoryClasses}>
{parentCategoryUrl &&
(isCurrent || hasSubCategories ? (
<Link
type={LinkType.SECONDARY}
to={getSearchPathObject(parentCategoryUrl, parentCategoryQuery)}
testId={`category-item-${category.name}-back-icon-link`}
>
<Icon className={Classes.categoryChevronIcon} iconType={IconType.CHEVRON_LEFT} data-testid="active-category-icon" />
</Link>
) : (
<div className={Classes.categoryChevronIcon} />
))}
<div className={Classes.categoryNameWrapper}>
<Link type={LinkType.SECONDARY} to={getSearchPathObject(category.url, category.query)}>
<div className={Classes.categoryName}>
<CategoryName name={category.name} id={category.id} />
</div>
</Link>
{showCounter && (
<div data-testid={`category-item-${category.name}-total`} className={Classes.categoryTotal}>
{category.isFacet ? category.count : currentTotal}
</div>
)}
</div>
</div>
{hasSubCategories && (
<div className={subCategoryClasses} data-testid="category-item-subcategories">
{subcategories?.map((cat, index) => (
<CategoryItem
category={cat}
currentCategoryId={currentCategoryId}
currentTotal={currentTotal}
parentCategoryUrl={category.url}
parentCategoryQuery={category.query}
key={`category-item-${cat.url}-${index}`}
level={level + 1}
/>
))}
{showMore && <ShowMoreButton showState={!isCollapsed} onClick={collapse} data-testid={`category-item-${category.name}-show-more-button`} />}
</div>
)}
</div>
);
}

export default CategoryItem;