App-level integration test that shows what the app should do when the API endpoint is mocked to return 1 result

DisplaysButtonAndPosts.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';

const mockTitle = 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit';

getAndSetupServer([
  rest.get(
    `https://jsonplaceholder.typicode.com/posts`,
    async (req, res, ctx) => 
      res(ctx.status(200), ctx.json(
        [
          {
            userId: 1,
            id: 1,
            title: mockTitle,
            body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
          },
      ])),
  )
]);

describe('Posts app when the endpoints are mocked to return 1 result: ', () => {
  test('renders button and mocked post in a table 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.findByRole('columnheader', { name: 'Title'});
    expect(screen.getByRole('cell', { name: mockTitle})).toBeInTheDocument();
  });
});