Modular Refactor and Enhanced Testing for Screens

.eslintrc.json

@@ -14,10 +14,13 @@
           ["@components", "./src/components"],
           ["@constants", "./src/constants"],
           ["@context", "./src/context"],
+          ["@hooks", "./src/hooks"],
           ["@screens", "./src/screens"],
           ["@redux", "./src/redux"],
           ["@utils", "./src/utils"],
-          ["@validate", "./src/validate"]
+          ["@validate", "./src/validate"],
+          ["@testUtils", "./__tests__/utils"],
+          ["@mocks", "./__tests__/mocks"]
         ],
         "extensions": [".js", ".jsx", ".json"]
       }
@@ -70,6 +73,7 @@
     ],
     "prettier/prettier": "error",
     "react/react-in-jsx-scope": "off",
+    "react/forbid-prop-types": "off",
     // prevent eslint to complain about the "styles" variable being used before it was defined
     "no-use-before-define": [
       "error",

README.md

@@ -101,7 +101,7 @@ Click the image above to view the demo video.
 - ✅ Run only necessary tests with `--findRelatedTests` flag with husky pre-commit hook.
 - ✅ Use aliases for paths in imports.
 - ✅ Generate automated test coverage reports and badges.
-- ✅ Ensure test coverage remains at or above 80%.
+- ✅ Ensure test coverage remains at or above 90%.
 
 ---
 

__tests__/App.test.js

@@ -3,11 +3,10 @@ import App from '../App';
 import renderInProvider from './utils/renderInProvider';
 
 describe('<App />', () => {
-  test('Text renders correctly on App', async () => {
+  test('App renders correctly and displays the initial text', async () => {
     const { toJSON } = renderInProvider(<App />);
     await waitFor(() => {
       screen.getByText('Items in the basket: 0');
     });
-    expect(toJSON()).toMatchSnapshot();
   });
 });