React Router V6 Outlet testing

Viewed 554

I had updated react router to version 6 but I have a problem. I use Outlet for rendering main layout. but in test rendering, doesn't show my main components in Outlet.

I am going to share the code and pictures with you.

This is the MainLayout return.

      <main className={selectClassName()}>
        <Outlet context={{ isLayoutChanged, layoutChangedData, setLayoutChangedData }}/>
      </main>

and this is my mock render:

<Provider store={store}>
 <StylesProvider jss={jss}>
  <LayoutContext.Provider>
   <BrowserRouter>
    <Routes>
      <Route path="/" element={<MainLayout />}>
        <Route path={options.path} element={children} />
      </Route>
     </Routes>
   </BrowserRouter>
  </LayoutContext.Provider>
 </StylesProvider>
</Provider>

and this is prettyDOM log:

const { container } = Render(<Login />);
console.log(prettyDOM(container));

 <body>
  <div>
    <div>
      <main/>
    </div>
  </div>
 </body>

prettyDOM result

if this description is not useful, tell me to share completely.

1 Answers
Related