Настройка пользовательского рендера React Testing Library

Question

Я настраиваю React Testing Library для проверки элементов и форм пользовательского интерфейса. В приложении используются поставщики тем, маршрутизатор и формы antd. Начал с этого простого теста, просто чтобы убедиться, что он что-то отображает.

// product-create.test.tsx

import React from 'react';
import { render, fireEvent, waitForElement } from '@testing-library/react';
import { ProductCreate } from '../product-create';

describe('Product create form tests', () => {
  test('Loads and shows list of product types', () => {
    const { getByText } = render(<ProductCreate />);
  });
})

, но получаю ошибку:

 Target container is not a DOM element.

      29 | export const ThemeContext = React.createContext({} as Theme);
      30 |
    > 31 | ReactDOM.render(
         |          ^
      32 |   <Provider store={store}>
      33 |     <ConnectedRouter history={history}>
      34 |       <Route>

, которая исходит от моего index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { RouterContext } from 'components/custom-browser-router/custom-browser-router';
import { App } from './app';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import { Route } from 'react-router';
import { history, store } from 'utils/other/store';

import 'lib/i18n';

import 'antd/dist/antd.css';

import 'styles/base.scss';
import 'styles/fonts.scss';
import 'styles/overrides.scss';

import { Theme, ElementSize } from 'lib/common-interfaces/theme';
import { ConnectedRouter } from 'connected-react-router';

const vars = require('styles/vars.scss');
const elementSize: ElementSize = ElementSize.Default;
const iconSize = 28; // ElementSize.Large = 36, ElementSize.Default = 28
const theme = {
  ...vars,
  elementSize,
  iconSize,
};
export const ThemeContext = React.createContext({} as Theme);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Route>
        {routeProps => (
          <RouterContext.Provider value={routeProps}>
            <ThemeContext.Provider value={theme}>
              <App />
            </ThemeContext.Provider>
          </RouterContext.Provider>
        )}
      </Route>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

Должен ли я настроить пользовательский рендерер, как описано здесь ? И если да, то как?