import * as React from 'react' ; import { render , screen } from '@testing-library/react' ; import '@testing-library/jest-dom/extend-expect' ; import api from 'YesterTech/api' ; import { useShoppingCart } from 'YesterTech/ShoppingCartState' ; import ProductProfile from 'YesterTech/ProductProfile' ; /**
 * Mocks
 */ jest . mock ( 'react-router-dom' , ( ) => ( { ... jest . requireActual ( 'react-router-dom' ) , useParams : ( ) => ( { productId : 5 , } ) , } ) ) ; jest . mock ( 'YesterTech/ShoppingCartState' ) ; jest . mock ( 'YesterTech/api' ) ; useShoppingCart . mockReturnValue ( { addToCart : ( ) => null , updateQuantity : ( ) => null , getQuantity : ( ) => null , } ) ; const mockProductResponse = { name : 'TestProduct' , price : 10 , } ; api . products . getProduct . mockResolvedValue ( mockProductResponse ) ; /**
 * Tests
 */ describe ( 'ProductProfile' , ( ) => { it ( 'should render the product' , async ( ) => { render ( < ProductProfile />); expect ( api . products . getProduct ) . toHaveBeenCalledWith ( 5 ) ; expect ( api . products . getProduct ) . toHaveBeenCalledTimes ( 1 ) ; const loading = screen . getByText ( 'Loading...' ) ; expect ( loading ) . toBeTruthy ( ) ; const name = await screen . findByText ( mockProductResponse . name ) ; expect ( name ) . toBeTruthy ( ) ; } ) ; } ) ;