ProductDetail.jsx

const ProductDetail = () => {
  const classes = useStyles();
  const cart = useSelector(state => state.cart);
  const { product } = useContext(ProductContext);

  return (
      <Card >
        <CardContent>
          <Box>
            {product.name}: {cart.count}
          </Box>
        </CardContent>
      </Card>
  );
}

ProductDetail.test.js

import React from 'react';
import '../../../test/setup';
import { cleanup, fireEvent, findByText } from '@testing-library/react';
import ProductDetail from './ProductDetail';

describe('Product Details', () => {

  afterEach(() => {
    cleanup();
  });

  it('renders with default data', async () => {

    const { queryByText, getByTestId } = render(
        <ProductDetail product={{name: 'Cool Product'}} cart={{count: 1}} />
    );

    expect(queryByText('Cool Product: 1')).toBeTruthy();
  });
});