redux

package.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
@@ -14,8 +15,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.1",
     "sass": "^1.59.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

src/components/app/App.test.tsx

@@ -3,13 +3,24 @@ import { render, screen } from '@testing-library/react';
 import App from './App';
 import { MemoryRouter } from 'react-router-dom';
 
+import * as reduxHooks from 'react-redux';
+jest.mock('react-redux');
+const mockedUseSelector = jest.spyOn(reduxHooks, 'useSelector');
+const mockedUseDispatch = jest.spyOn(reduxHooks, 'useDispatch');
+import { initialState } from '../../store/moviesSlice';
+
 describe('test App component', () => {
   test('it renders', () => {
+    mockedUseSelector.mockReturnValue(initialState);
+    const dispatch = jest.fn();
+    mockedUseDispatch.mockReturnValue(dispatch);
+
     render(
       <MemoryRouter initialEntries={['/']}>
         <App />
       </MemoryRouter>
     );
+    expect(screen.getByRole('app')).toBeInTheDocument();
     screen.debug();
   });
 

src/components/app/App.tsx

@@ -12,7 +12,7 @@ import Layout from '../layout';
 export default class App extends Component<{}, {}> {
   render() {
     return (
-      <div className='App wrapper'>
+      <div className='App wrapper' role='app'>
         <Routes>
           <Route path='/' element={<Layout />}>
             <Route index element={<HomePage />}></Route>