Why is Jest not rendering React Router component correctly?

Question

Testing a router component and when I call the screen.debug() in a test after rendering, the DOM output is not what I expected. Why?

Test:

import { render, userEvent as user, screen, getByRole } from '@testing-library/react'
import { Router } from 'react-router-dom'
import { createMemoryHistory } from 'history'
import AppRouter from '../router'

test('Renders AppRouter', () => {
    const history = createMemoryHistory({ initialEntries: ['/post'] })
    render(() => (
        <Router history={history}>
            <AppRouter />
        </Router>
    ))
    
    screen.debug()
})

Component:

import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import { useState } from 'react'

import useLocalStorage from './hooks/useLocalStorage'
import * as Constants from './constants'

import Header from './layout/header/header'
import MainPage from './pages/mainPage/mainPage'
import PostPage from './pages/postPage/postPage'
import UserPage from './pages/userPage/userPage'
import LoginPage from './pages/loginPage/loginPage'
import SignupPage from './pages/signupPage/signupPage'
import NewPage from './pages/newPage/newPage'
import FeedbackPage from './pages/feedbackPage/feedbackPage'
import AdminPage from './pages/adminPage/adminPage'
import SettingPage from './pages/settingPage/settingPage'

import { WebContext } from './context/WebContext'
import Favicon from 'react-favicon'

const AppRouter = () => {
    const [adminCode, setAdminCode] = useLocalStorage('admin', '')
    const [isMenuOpen, setIsMenuOpen] = useState(false)
    const [page, setPage] = useState(Constants.Page.Home)

    return (
        <BrowserRouter>
            <div role="hello">
                <Favicon url={require('../public/favicon.ico')} />
                <WebContext.Provider
                    value={{
                        isMenuOpen,
                        setIsMenuOpen,
                        page,
                        setPage,
                        adminCode,
                        setAdminCode,
                    }}
                >
                    <Header />
                    <h1>
                        hello
                    </h1>

                    <Switch>
                        <Route component={MainPage} path="/" exact={true} />
                        <Route component={PostPage} path="/post/:id" />
                        <Route component={UserPage} path="/user" />
                        <Route component={LoginPage} path="/login" />
                        <Route component={SignupPage} path="/signup" />
                        <Route component={NewPage} path="/new" />
                        <Route component={FeedbackPage} path="/feedback" />
                        <Route component={AdminPage} path="/admin" />
                        <Route component={SettingPage} path="/setting" />
                        <Route component={() => <Redirect to="/" />} />
                    </Switch>
                </WebContext.Provider>
            </div>
        </BrowserRouter>
    )
}

export default AppRouter

Code-Trace:

EDIT

Error when not passing in a function to render:

Favicon error:

Answer 1

You are passing a function to the test render function when it's expecting JSX.

Remove the function definition and just pass the Router and AppRouter as JSX.

Example:

test('Renders AppRouter', () => {
  const history = createMemoryHistory({ initialEntries: ['/post'] });

  render(
    <Router history={history}>
      <AppRouter />
    </Router>
  );

  screen.debug();
});