Issue with navigating to another page using React testing library & AWS Amplify

I have an application that is set up to navigate any unauthenticated user to the "/" Route. I use AWS Cognito for authentication and aws-amplify library to interact with Cognito.

Let's consider two pages Page A and Page B. The user reaches Page A from Page B. Following is a general flow of interactions:

Page B -> click something -> Page A -> do something -> Hit Back -> Page B

The user can hit a back button to go back to Page A.

While unit testing this functionality, the following issue occurs: When I try to mock going back from a Page A to another Page B and expecting to see some info on Page B based on an action done from Page A, I notice that, on hitting Back, the route is actually "/" and not the route for Page B in the test.

The information that needs to be saved between the back and forth is passed between these components using the React Context API.

Whenever I try mocking going back from Page A, and expecting to fall to Page B, the history.location.pathname is always "/" while the testing DOM is showing that of Page A.

Am I missing something in the mocking? I have also tried to mock the authentication, but no luck.

Following is a code snippet of the test:

import { API, Auth } from 'aws-amplify';
import { createMemoryHistory } from 'history';


test('Should see files uploaded if user goes back and chooses the same option', async () => {
  Auth.signIn = jest.fn().mockImplementation(() => {
    return Promise.resolve();
  });

  Auth.currentAuthenticatedUser = jest.fn().mockImplementation(() => {
    return Promise.resolve({ attributes: {} });
  });

  // mock history object
  const history = createMemoryHistory();
  history.push('', {});

  render(
    <MockTheme>
      <Router history={history}>
        <AddStationProvider>
          <AddTimeSeriesFiles /> //Page A
        </AddStationProvider>
      </Router>
    </MockTheme>
  );

  fireEvent.click(screen.getByRole('button', { name: /Back/ }));
  expect(history.location.pathname).toBe('/add-station-options'); // URL of Page B
});

And this is the outcome:

expect(received).toBe(expected) // Object.is equality                                                                                                                                       
Expected: "/add-station-options"                                                                                                       
Received: "/"                                                                                                                          

  412 |
  413 |   fireEvent.click(screen.getByRole('button', { name: /Back/ }));
> 414 |   expect(history.location.pathname).toBe('/add-station-options');

Here is how the main App.tsx looks like

<UserContext.Provider
value={{
  user,
  isLoadingUser,
  handleSignIn,
  handleSignOut,
  handleUpdateAttributes,
  handleConfirmEmailChange,
  handleChangePassword,
}}
>
<div className={classes.root}>
  <ErrorProvider>
    <SuccessProvider>
      <ErrorBoundary>
          <ErrorBoundary>
            <Switch>
              <AddStationProvider>
                <PrivateRoute exact path={urls.addTimeSeriesFiles}>
                  <AddTimeSeriesFiles />
                </PrivateRoute>
                <PrivateRoute exact path={urls.addStationOptions}>
                  <AddStationOptions />
                </PrivateRoute>
                <PrivateRoute exact path={urls.addStationInfo}>
                  <AddStationInfoPage />
                </PrivateRoute>
              </AddStationProvider>
            </Switch>
          </ErrorBoundary>
      </ErrorBoundary>
    </SuccessProvider>
  </ErrorProvider>
</div>
</UserContext.Provider>