Skip to content

Instantly share code, notes, and snippets.

@ahayes91
Last active June 12, 2021 20:29
Show Gist options
  • Save ahayes91/4a7de54b62cc074c5a61cce7986826c2 to your computer and use it in GitHub Desktop.
Save ahayes91/4a7de54b62cc074c5a61cce7986826c2 to your computer and use it in GitHub Desktop.
App-level integration test that shows what the app should do when the API endpoint is mocked to return 1 result
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();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment