content: import React from 'react';
  import { render, screen } from '@testing-library/react';
  import 'jest-styled-components';
  import 'regenerator-runtime/runtime';
  import '@testing-library/jest-dom';
  
  import { Grommet } from '../../../components/Grommet';
  import { ResponsiveContext } from '..';
  
  describe('ResponsiveContext', () => {
    describe('when viewport width is 768px', () => {
      beforeEach(() => {
        jest
          .spyOn(document.body, 'clientWidth', 'get')
          .mockImplementation(() => 768);
      });
  
      test('should return small', () => {
        const { container } = render(
          <Grommet>
            <ResponsiveContext.Consumer>
              {(size) => size}
            </ResponsiveContext.Consumer>
          </Grommet>,
        );
  
        expect(screen.getByText('small')).toBeInTheDocument();
        expect(container.firstChild).toMatchSnapshot();
      });
    });
  
    describe('when viewport width is 1536px', () => {
      beforeEach(() => {
        jest
          .spyOn(document.body, 'clientWidth', 'get')
          .mockImplementation(() => 1536);
      });
  
      test('should return medium', () => {
        const { container } = render(
          <Grommet>
            <ResponsiveContext.Consumer>
              {(size) => size}
            </ResponsiveContext.Consumer>
          </Grommet>,
        );
  
        expect(screen.getByText('medium')).toBeInTheDocument();
        expect(container.firstChild).toMatchSnapshot();
      });
    });
  
    describe('when viewport width is 1537px', () => {
      beforeEach(() => {
        jest
          .spyOn(document.body, 'clientWidth', 'get')
          .mockImplementation(() => 1537);
      });
  
      test('should return large', () => {
        const { container } = render(
          <Grommet>
            <ResponsiveContext.Consumer>
              {(size) => size}
            </ResponsiveContext.Consumer>
          </Grommet>,
        );
  
        expect(screen.getByText('large')).toBeInTheDocument();
        expect(container.firstChild).toMatchSnapshot();
      });
    });
  });
  