jest ошибка "Целевой контейнер не является элементом DOM". потому что это тестирует мой index.tsx

Question

Итак, я хочу настроить тестирование для реактивного проекта, над которым я работаю.

Я настроил несколько тестовых файлов, но Jest всегда терпит неудачу с

Test suite failed to run

    Target container is not a DOM element.

      4 | import App from '~/App';
      5 |
    > 6 | ReactDOM.render(<App />, document.getElementById('root'));
        |          ^
      7 |

Я проверял это с несколькими тестовыми файлами. Даже если я тестирую компонент глубоко в своей папке компонентов, я получаю ту же ошибку. Я прочитал о другой проблеме, что это может произойти, если я также отображаю свое приложение в том же файле, который я объявляю. Но у меня есть отдельный index.tsx, который предназначен только для рендеринга. Так что я не понимаю, почему это попытка проверить мой index.tsx.

// file structure

root/
   - src/
      - components/
      - App.tsx
      - App.test.tsx
      - index.tsx
   - jest.config.js       

// jest.config.js
module.exports = {

  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleNameMapper: {
    '~/*': '<rootDir>/src'
  },
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],

  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',

  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

// App.tsx

import * as React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import styled, { ThemeProvider } from 'styled-components';

// [...]
export const DMSContext = React.createContext(dmsContextValue);

export const StyledApp = styled.div`
  display: flex;
`;

const App: React.FC = (): React.ReactElement => {
// [...]
  return (
    <Router>
      <DMSContext.Provider value={dmsContextValue}>
        <ThemeProvider theme={theme}>
          <>
            <GlobalStyles />
            <StyledApp>
              <Burger onClickHandler={toggleSideBar} mobileView={mobileView} expanded={expanded} />
              <SideNav
                mobileView={mobileView}
                expanded={expanded || !mobileView}
                onLinkClick={(): void => setExpanded(false)}
              />
              <Switch>
                // [...Routes]
              </Switch>
            </StyledApp>
          </>
        </ThemeProvider>
      </DMSContext.Provider>
    </Router>
  );
};

export default App;

// App.test.tsx
import * as React from 'react';
import { render } from '@testing-library/react';
import App from './App';
import '@testing-library/jest-dom/extend-expect';

describe('<App />', () => {
  test('should render the app', async () => {
    const { getByText } = render(<App />);
    expect(getByText('Projects')).toBeInTheDocument();
  });
});