AppsNav.test.js

import React from 'react';
import { render, cleanup } from 'react-testing-library';

import { AppsNav } from '.';

describe('<AppsNav />', () => {
  afterEach(cleanup);

  const history = {
    listen: jest.fn(),
  };
  const props = {
    classes: {},
    location: { pathname: '/' },
    navActions: {},
    history,
    open: false,
  };

  it('should have a Service Center link', () => {
    const { queryAllByText } = render(<AppsNav {...props} />);
    expect(queryAllByText('Service Center')).toHaveLength(1);
  });

  it('should renders as hidden for mobile by default', () => {
    window.matchMedia = jest.fn().mockImplementation(query => {
      return {
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
      };
    });
    const { getByTestId } = render(<AppsNav {...props} open={false} />);
    expect(getByTestId('custom-drawer'));
  });

  it('renders as shown for mobile when not hidden', () => {
    window.matchMedia = jest.fn().mockImplementation(query => {
      return {
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
      };
    });
    const { getByTestId } = render(<AppsNav {...props} open />);
    expect(getByTestId('custom-drawer-open'));
  });
});