Initial location when testing with react testing library

[jannolii]

I would like to use redux-first-history but can't figure out how I might set up my tests with HistoryRouter so that I have specific route active.

I was using RouterProvider of react-router when creating a store which allowed to specify initialEntries and initialIndex.

test-utils.js:

import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { Provider } from 'react-redux';
import { RouterProvider } from 'react-router-dom';

// local
import setupStore from '../../configureStore';

function render(
  {
    initialState,
    store = setupStore(initialState),
    router,
  } = {}
) {
  return rtlRender(
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  );
}

function renderWithContext({
  initialState,
  store = setupStore(initialState),
  router,
} = {}
) {
  rtlRender(
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  );
  return { store };
}

export * from '@testing-library/react';
export { render, renderWithContext };

and then in my test:

// libraries
import React from 'react';
import { jest, expect } from '@jest/globals';
import { createMemoryRouter } from 'react-router';
import { faker } from '@faker-js/faker';
import userEvent from '@testing-library/user-event';

// components
import EventRegistrationForm from '../../components/EventRegistrationForm';

// local
import { fakeStoreLoggedInAdmin } from '../factories/fakeStores';
import { fireEvent, render, screen } from '../utils/test-utils';
import * as actions from '../../actions/actions';
import * as requestHandler from '../../lib/requestHandler';

jest.mock('@fortawesome/react-fontawesome');

describe('EventRegistrationForm', () => {
  const request = require('superagent');
  const mock = require('superagent-mocker')(request);

  beforeEach(() => {
    mock.clearRoutes();
  });

  afterEach(() => {
    jest.restoreAllMocks();
    jest.clearAllMocks();
    jest.resetAllMocks();
  });

  it('renders registration form', async () => {
    const returnedData = {
      calendarEvent: {
        id: 1,
        name: faker.lorem.slug(),
        description: faker.lorem.sentence(),
        eventStartAt: faker.date.soon(1).getTime(),
        eventEndAt: faker.date.soon(2).getTime(),
        mandrillTemplate: faker.lorem.word(),
        bannerImageUrl: faker.image.imageUrl(),
        badgeImageUrl: faker.image.imageUrl(),
        createdAt: faker.date.recent(5).getTime(),
      },
      recaptchaRequired: false,
    };
    mock.get('/mess/registreeri', function(req) {
      return {
        body: {
          ...returnedData,
        },
      };
    });

    const initialState = { ...fakeStoreLoggedInAdmin };

    const routes = [{
      path: '/mess/registreeri',
      element: <EventRegistrationForm/>,
    }];

    const router = createMemoryRouter(routes, {
      initialEntries: ['/mess/registreeri'],
      initialIndex: 0,
    });

    render({ initialState, router });
    expect(await screen.findByAltText('Event banner')).toBeInTheDocument();
  });
});

If I would now switch to using HistoryRouter could the same behaviour be achieved. Would be grateful for any idea :)