How to setup unit testing for React application using React Testing Library and Jest?

I have a simple react application that uses RTK Query and React Router. It makes an API call and it has 2 routes

1. unauthorized
2. welcome

I need help with testing setup and couple of sample tests using React Test Library and Jest.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Routes>
        <Route path='/app' element={ <App />} />
      </Routes>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

App.js

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

import Unauthorized from './features/unauthorized/Unauthorized';
import NotFound from './features/notFound/NotFound';
import RequireAuth from './features/auth/RequireAuth';
import Welcome from './features/welcome/Welcome';

function App() {
  return (
    <Routes>
      <Route index path="unauthorized" element={ <Unauthorized />} />
      <Route path="*" element={<NotFound />} />
      <Route element={<RequireAuth groups={groups} />}>
         <Route path="welcome" element={<Welcome />} />
         <Route path="/" element={<Navigate to={welcome} />} />
      </Rout>
    </Routes>
  );
}

export default App;

Unauthorized.js

function Unauthorized(){
  return 'Unauthorized';
}

export default Unauthorized;

NotFound.js

function NotFound(){
  return 'Not Found!';
}

export default NotFound;

RequireAuth.js

import React from 'react';
import { Navigate, Outlet, useLocation } from 'react-router-dom';

function RequireAuth() {
  const location = useLocation();

  const isAuthorized = true;

  if (isAuthorized) {
    return <Outlet />;
  } else {
    return <Navigate to='unauthorized' state={{ from: location }} replace />
  }
}

export default RequireAuth;

Welcome.js

import React from 'react';
import { useGetWelcomeQuery } from './welcomeApi';

function Welcome() {
  const { data } = useGetWelcomeQuery();

  return (
    <div>
      <p>Welcome!</p>
      <h2>Messages</h2>
      {data.map((item) => (
        <p key={item.id}>{item.message}</p>
      ))}
    </div>
  );
}

export default Welcome;

store.js

import { configureStore } from '@reduxjs/toolkit'
import { welcomeApi } from "../features/welcome/welcomeApi";

export const store = configureStore({
  reducer: {
    [welcomeApi.reducerPath]: welcomeApi.reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true
});

welcomeApi.js

export const welcomeApi = createApi({
  reducerPath: 'welcomeApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getWelcome: builder.query({
      query: () => ({
         url: '/message'
      }),
    }),
    addWelcome: builder.mutation({
      query: (welcomeMessage) => ({
        url: '/message',
        method: 'POST',
        body: welcomeMessage,
      }),
    }),
    updateWelcome: builder.mutation({
      query: (welcomeMessage) => ({
        url: `message/${id}`,
        method: 'PUT',
        body: welcomeMessage
      }),
    }),
  }),
});

export const {
  useGetWelcomeQuery,
  useAddWelcomeMutation,
  useUpdateWelcomeMutation
} = welcomeApi;