testing-with-mocked-provider.jsx

import React from 'react';
import { Viewport } from '@lib/types';
import {
  screen,
  render,
  renderHook,
  waitFor,
} from '../../__tests__/test-utils';
import { MockedViewportProvider } from '../../__mocks__/mock-viewport-provider';

const DummyView: FC = () => {
  const viewport = useViewport();
  return <div data-testid="view">{viewport}</div>;
};

describe('DummyView', () => {
  it('Renders correctly', () => {
    const { rerender, queryByText } = render(
      <MockedViewportProvider viewport={Viewport.xs}>
        <DummyView />
      </MockedViewportProvider>
    );

    // jest config extend with @testing-library/jest-dom
    expect(queryByText(Viewport.xs)).toBeVisible();

    rerender(
      <MockedViewportProvider viewport={Viewport.md}>
        <DummyView />
      </MockedViewportProvider>
    );

    expect(queryByText(Viewport.md)).toBeVisible();
  });
});