I really need to find a solution to this issue i am facing with my test. i should render my app and my route needs to be ‘/not-found’ page for this certain test. if i am not logged in (if i dont have a token) i need to be routed back to main ‘/’ and if i have a token it needs to show the ‘not-found’ page.
this is my test
<code>import { render, waitFor } from '../test-utils';
import App from '../app/Layout/App.tsx';
import { screen } from '@testing-library/react';
import CommonStore from '../app/common/stores/CommonStore.ts';
import { store } from '../app/common/stores/store.ts';
test('When a not found page is called without a token it should redirect to login form', async () => {
const { history } = render(<App />, {
expect(history.location.pathname).toBe('/');
expect(screen.getByText(/Login/i)).toBeInTheDocument();
test('When a not found page is called with a token it should redirect to not-found page', async () => {
const commonStore = new CommonStore();
store.commonStore.setToken('faketoken');
const { history } = render(<App />, {
expect(history.location.pathname).toBe('/not-found');
expect(screen.getByText(/Opps/i)).toBeInTheDocument();
<code>import { render, waitFor } from '../test-utils';
import App from '../app/Layout/App.tsx';
import { screen } from '@testing-library/react';
import CommonStore from '../app/common/stores/CommonStore.ts';
import { store } from '../app/common/stores/store.ts';
test('When a not found page is called without a token it should redirect to login form', async () => {
const { history } = render(<App />, {
route: '/not-found',
routeHistory: ['/'],
});
await waitFor(() => {
expect(history.location.pathname).toBe('/');
});
await waitFor(() => {
expect(screen.getByText(/Login/i)).toBeInTheDocument();
});
});
test('When a not found page is called with a token it should redirect to not-found page', async () => {
const commonStore = new CommonStore();
store.commonStore.setToken('faketoken');
const { history } = render(<App />, {
route: '/not-found',
store: { commonStore },
});
await waitFor(() => {
expect(history.location.pathname).toBe('/not-found');
});
await waitFor(() => {
expect(screen.getByText(/Opps/i)).toBeInTheDocument();
});
});
</code>
import { render, waitFor } from '../test-utils';
import App from '../app/Layout/App.tsx';
import { screen } from '@testing-library/react';
import CommonStore from '../app/common/stores/CommonStore.ts';
import { store } from '../app/common/stores/store.ts';
test('When a not found page is called without a token it should redirect to login form', async () => {
const { history } = render(<App />, {
route: '/not-found',
routeHistory: ['/'],
});
await waitFor(() => {
expect(history.location.pathname).toBe('/');
});
await waitFor(() => {
expect(screen.getByText(/Login/i)).toBeInTheDocument();
});
});
test('When a not found page is called with a token it should redirect to not-found page', async () => {
const commonStore = new CommonStore();
store.commonStore.setToken('faketoken');
const { history } = render(<App />, {
route: '/not-found',
store: { commonStore },
});
await waitFor(() => {
expect(history.location.pathname).toBe('/not-found');
});
await waitFor(() => {
expect(screen.getByText(/Opps/i)).toBeInTheDocument();
});
});
and this below is my custom render :
import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { Store, StoreContext } from '../app/common/stores/store';
import CommonStore from '../app/common/stores/CommonStore';
import UserStore from '../app/common/stores/userStore';
import ModalStore from '../app/common/stores/modalStore';
import AgentStore from '../app/NavBarTabs/AgentReportTab/AgentStore';
import AccountReportStore from '../app/NavBarTabs/AccountReportTab/AccountReportStore';
import TeamReportStore from '../app/NavBarTabs/TeamReportTab/TeamReportStore';
interface RenderOptions {
const storeContextValue: Store = {
commonStore: store.commonStore || new CommonStore(),
userStore: store.userStore || new UserStore(),
modalStore: store.modalStore || new ModalStore(),
agentStore: store.agentStore || new AgentStore(),
accountStore: store.accountStore || new AccountReportStore(),
teamStore: store.teamStore || new TeamReportStore(),
const history = createMemoryHistory({
initialEntries: routeHistory.length > 0 ? routeHistory : [route],
function Wrapper({ children }: { children?: React.ReactNode }) {
<Router navigator={history} location={history.location}>
<StoreContext.Provider value={storeContextValue}>
...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }),
export * from '@testing-library/react';
export { customRender as render };
<code>
import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { Store, StoreContext } from '../app/common/stores/store';
import CommonStore from '../app/common/stores/CommonStore';
import UserStore from '../app/common/stores/userStore';
import ModalStore from '../app/common/stores/modalStore';
import AgentStore from '../app/NavBarTabs/AgentReportTab/AgentStore';
import AccountReportStore from '../app/NavBarTabs/AccountReportTab/AccountReportStore';
import TeamReportStore from '../app/NavBarTabs/TeamReportTab/TeamReportStore';
interface RenderOptions {
route?: string;
routeHistory?: string[];
store?: Partial<Store>;
}
function customRender(
ui: React.ReactElement,
{
route = '/',
store = {},
routeHistory = [route],
...renderOptions
}: RenderOptions = {},
) {
const storeContextValue: Store = {
commonStore: store.commonStore || new CommonStore(),
userStore: store.userStore || new UserStore(),
modalStore: store.modalStore || new ModalStore(),
agentStore: store.agentStore || new AgentStore(),
accountStore: store.accountStore || new AccountReportStore(),
teamStore: store.teamStore || new TeamReportStore(),
};
const history = createMemoryHistory({
initialEntries: routeHistory.length > 0 ? routeHistory : [route],
});
function Wrapper({ children }: { children?: React.ReactNode }) {
return (
<Router navigator={history} location={history.location}>
<StoreContext.Provider value={storeContextValue}>
{children}
</StoreContext.Provider>
</Router>
);
}
return {
...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }),
history,
};
}
export * from '@testing-library/react';
export { customRender as render };
</code>
import React from 'react';
import { render as rtlRender } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { Store, StoreContext } from '../app/common/stores/store';
import CommonStore from '../app/common/stores/CommonStore';
import UserStore from '../app/common/stores/userStore';
import ModalStore from '../app/common/stores/modalStore';
import AgentStore from '../app/NavBarTabs/AgentReportTab/AgentStore';
import AccountReportStore from '../app/NavBarTabs/AccountReportTab/AccountReportStore';
import TeamReportStore from '../app/NavBarTabs/TeamReportTab/TeamReportStore';
interface RenderOptions {
route?: string;
routeHistory?: string[];
store?: Partial<Store>;
}
function customRender(
ui: React.ReactElement,
{
route = '/',
store = {},
routeHistory = [route],
...renderOptions
}: RenderOptions = {},
) {
const storeContextValue: Store = {
commonStore: store.commonStore || new CommonStore(),
userStore: store.userStore || new UserStore(),
modalStore: store.modalStore || new ModalStore(),
agentStore: store.agentStore || new AgentStore(),
accountStore: store.accountStore || new AccountReportStore(),
teamStore: store.teamStore || new TeamReportStore(),
};
const history = createMemoryHistory({
initialEntries: routeHistory.length > 0 ? routeHistory : [route],
});
function Wrapper({ children }: { children?: React.ReactNode }) {
return (
<Router navigator={history} location={history.location}>
<StoreContext.Provider value={storeContextValue}>
{children}
</StoreContext.Provider>
</Router>
);
}
return {
...rtlRender(ui, { wrapper: Wrapper, ...renderOptions }),
history,
};
}
export * from '@testing-library/react';
export { customRender as render };
I have my routes here as well if it would help:
<code>import { createBrowserRouter, Navigate, RouteObject } from 'react-router-dom';
import RequireAuth from './RequireAuth';
import NotFound from '../Pages/NotFound.tsx';
import ServerError from '../Pages/ServerError.tsx';
export const routes: RouteObject[] = [
element: <RequireAuth />,
{ path: 'not-found', element: <NotFound /> },
{ path: '*', element: <Navigate replace to="/not-found" /> },
{ path: 'server-error', element: <ServerError /> },
export const router = createBrowserRouter(routes);
<code>import { createBrowserRouter, Navigate, RouteObject } from 'react-router-dom';
import App from './App';
import RequireAuth from './RequireAuth';
import NotFound from '../Pages/NotFound.tsx';
import ServerError from '../Pages/ServerError.tsx';
export const routes: RouteObject[] = [
{
path: '/',
element: <App />,
children: [
{
element: <RequireAuth />,
children: [
{ path: 'not-found', element: <NotFound /> },
{ path: '*', element: <Navigate replace to="/not-found" /> },
],
},
{ path: 'server-error', element: <ServerError /> },
],
},
];
export const router = createBrowserRouter(routes);
</code>
import { createBrowserRouter, Navigate, RouteObject } from 'react-router-dom';
import App from './App';
import RequireAuth from './RequireAuth';
import NotFound from '../Pages/NotFound.tsx';
import ServerError from '../Pages/ServerError.tsx';
export const routes: RouteObject[] = [
{
path: '/',
element: <App />,
children: [
{
element: <RequireAuth />,
children: [
{ path: 'not-found', element: <NotFound /> },
{ path: '*', element: <Navigate replace to="/not-found" /> },
],
},
{ path: 'server-error', element: <ServerError /> },
],
},
];
export const router = createBrowserRouter(routes);
I would appreciate some help please I cant seem to find the issue