ProductDetail.test.js

import React from 'react';
import { cleanup, fireEvent, findByText } from '@testing-library/react';
import { renderWithRedux, createReduxStore } from '/testHelpers';
import ProductDetail from './ProductDetail';
import ProductContext from './ProductContext';

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

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

  it('renders with default data', async () => {
    const store = createReduxStore({cart: {count: 1}});
    store.subscribe = () => {};
    store.dispatch = () => {};
    
    const product = {
      name: 'Cool Product'
    }

    const { queryByText, getByTestId } = renderWithRedux(
      <ProductContext.Provider value={{ product }}>
        <ProductDetail />
      </ProductContext.Provider>,
      { store }
    );

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

testHelpers.js

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';

export function renderWithRedux(component, { store } = {}) {
  const rendered = render(
    <BrowserRouter>
      <Provider store={store}>{component}</Provider>
    </BrowserRouter>
  );
  return {
    ...rendered,
    rerender: el => renderWithRedux(el, { store }),
    store
  };
}

// create a fake redux store with the option to add
// properties for scenarios we might want to test
export const createReduxStore = (options = {}) => {
  const defaultOpts = {
    cart: {
      _id: 'cart_id',
      count: 0
    }
  };

  return {
    getState: () => ({
      ...defaultOpts,
      ...options
    }),
    createStore: () => ({})
  };
};