(Blog) Testing a Redux hooked app

App.test.jsx

import { render, fireEvent, screen, waitForElementToBeRemoved } from '@testing-library/react';

import * as utils from './utils';

jest.mock('./utils');

const foodData = [
  {
    id: 'SM',
    label: 'Sausage McMuffin',
    description: 'Description of McMuffin',
    price: 12,
  },
  {
    id: 'MP',
    label: 'Mushroom Pizza',
    diet: 'veg',
    description: 'Description of Pizza',
    price: 20,
  },
];

describe('Test App', () => {
  beforeEach(() => {
    utils.loadFoodData.mockImplementation(() => Promise.resolve(foodData));
  });

  afterEach(() => {
    utils.loadFoodData.mockRestore();
  });
  
  test('only show veg food when veg filter is applied', async () => {
    renderApp();
    await waitForElementToBeRemoved(() => screen.getByText(/Loading/i));

    // enable Veg Only filter
    fireEvent.click(screen.getByRole('checkbox', {name: /Veg Only/i}));

    expect(screen.queryByText(/Sausage McMuffin/i)).toBe(null)
    expect(screen.getByText(/Mushroom Pizza/i)).toBeInTheDocument();


    // disable Veg Only filter
    fireEvent.click(screen.getByRole('checkbox', {name: /Veg Only/i}));

    expect(screen.getByText(/Sausage McMuffin/i)).toBeInTheDocument();
    expect(screen.getByText(/Mushroom Pizza/i)).toBeInTheDocument();
  });
});