App-level integration test that tests the error message displayed to the user when the API request fails.

DisplaysFailureMessage.integration.test.js

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import getAndSetupServer from './getAndSetupServer';
import { rest } from 'msw';
import App from './App';

getAndSetupServer([
    rest.get(
        `https://jsonplaceholder.typicode.com/posts`,
        async (req, res, ctx) => 
          res(ctx.status(404)),
      )
]);

describe('Posts app when the endpoints are mocked to fail: ', () => { 
  test('renders error message on button click', async () => {
    render(<App />);
    const button = screen.getByRole('button', { name: 'Click me to fetch posts!' } );
    expect(button).toBeInTheDocument();
    userEvent.click(button);
    await screen.findByText('Whoops! Something went wrong. Try refreshing the page!');
    expect(screen.queryByRole('button', { name: 'Click me to fetch posts!' } )).not.toBeInTheDocument();
    expect(screen.queryByRole('cell')).not.toBeInTheDocument();
  });
});