An app-level integration test for a more complex app in a microfrontend Single-SPA application

MoreComplexApp.integration.test.js

import React from 'react';
import { render, screen, cleanup, waitFor } from '@testing-library/react/pure';
import getAndSetupServer from './getAndSetupServer';
import {
  handlersForStudentWithNoScores,
} from './mockServiceWorkerHandlers.data.js';
import App from './App';

getAndSetupServer(handlersForStudentWithNoScores);

// This is one of the few examples of jest.mocks you might need - authentication
// For us, this is mocking the function that fetches user information usually set after login
jest.mock('./authentication', () => ({
  getUserCtx: jest.fn().mockReturnValue({
    userId: 'mockUserId',
    firstName: 'Hermione'
  }),
}));

describe('Scores App for a student with no scores: ', () => {
  beforeAll(() => {
    window.history.replaceState('', '', 'ed/scores');
    render(<App basename={'ed/'} />);
  });

  afterAll(cleanup);

  it('shows an empty message when a student has no scores', async () => {
    expect(await screen.findByText('No Scores Yet')).toBeInTheDocument();
    expect(
      screen.getByText('That’s it! Check back later for your scores.'),
    ).toBeInTheDocument();
    expect(
      screen.getByRole('heading', {
        name: 'All Scores for Hermione',
      }),
    ).toBeInTheDocument();
  });

  it('updates the URL when user clicks the Go to Assignments button', async () => {
    const goToAssignmentsButton = await screen.findByRole('link', {
      name: /Go to Assignments/,
    });
    userEvent.click(goToAssignmentsButton);

    await waitFor(() => {
      // We can't actually test that the assignments page has rendered because that's a different App
      // But we can test that our button updates the URL as we expect!
      expect(window.location.pathname).toEqual('ed/assignments/');
    });
  });
});