fixed jest and prettier errors, pipeline uses correct caching

.gitlab-ci.yml

@@ -6,16 +6,18 @@ stages:
 # - deploy
 
 cache:
+    key: ${CI_COMMIT_REF_SLUG}
     paths:
-        - node_modules/
+        - .npm/
 
 install_dependencies:
     stage: build
     script:
-        - npm install
+        - npm ci --cache .npm --prefer-offline
     artifacts:
         paths:
             - node_modules/
+        expire_in: 1 week
 
 testing_jest:
     stage: test

package.json

 {
-  "name": "unisport_frontend",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@reduxjs/toolkit": "^1.5.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "^7.1.7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "typescript": "~4.1.5"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint . -c .eslint-rc.js",
-    "lint-fix": "eslint . -c .eslint-rc.js --fix",
-    "prettier-check": "prettier --check ."
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.13.15",
-    "@types/react-router-dom": "^5.1.7",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react": "^1.1.7",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.3.1",
-    "prettier": "2.2.1"
-  }
+    "name": "unisport_frontend",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@reduxjs/toolkit": "^1.5.1",
+        "@testing-library/jest-dom": "^4.2.4",
+        "@testing-library/react": "^9.3.2",
+        "@testing-library/user-event": "^7.1.2",
+        "@types/jest": "^24.0.0",
+        "@types/node": "^12.0.0",
+        "@types/react": "^16.9.0",
+        "@types/react-dom": "^16.9.0",
+        "@types/react-redux": "^7.1.7",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-redux": "^7.2.0",
+        "react-router-dom": "^5.2.0",
+        "react-scripts": "4.0.3",
+        "typescript": "~4.1.5"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "lint": "eslint . -c .eslint-rc.js",
+        "lint-fix": "eslint . -c .eslint-rc.js --fix",
+        "prettier-check": "prettier --check .",
+        "prettier-write": "prettier --write ."
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@babel/preset-env": "^7.13.15",
+        "@types/react-router-dom": "^5.1.7",
+        "@typescript-eslint/eslint-plugin": "^4.22.0",
+        "@typescript-eslint/parser": "^4.22.0",
+        "eslint": "^7.27.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-config-react": "^1.1.7",
+        "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-promise": "^4.3.1",
+        "prettier": "2.2.1"
+    }
 }

src/App.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import { Provider } from 'react-redux'
 import { store } from './redux/store'
-import App from './App'
+import App from './components/App'
 
 test('renders learn react link', () => {
     const { getByText } = render(

src/components/App.tsx

-import React, {Suspense} from 'react'
-import {
-    BrowserRouter as Router,
-    Switch,
-    Route,
-} from "react-router-dom";
-import UserHome from "./user/homeComponent";
+import React, { Suspense } from 'react'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import UserHome from './user/homeComponent'
 
 const AdminComponent = React.lazy(() => import('./admin'))
 
@@ -12,16 +8,16 @@ function App() {
     return (
         <Router>
             <div className="App">
-                <h1 style={{color: 'green'}}>UniSport</h1>
+                <h1 style={{ color: 'green' }}>UniSport</h1>
             </div>
             <Switch>
                 <Route path="/admin">
                     <Suspense fallback={<div>Loading AdminComponent...</div>}>
-                        <AdminComponent/>
+                        <AdminComponent />
                     </Suspense>
                 </Route>
                 <Route path="">
-                    <UserHome/>
+                    <UserHome />
                 </Route>
             </Switch>
         </Router>

src/components/admin/index.tsx

-import React from 'react';
+import React from 'react'
 
 const AdminHome = () => {
-    return (<div>Placeholder for Admin Interface</div>)
+    return <div>Placeholder for Admin Interface</div>
 }
-export default AdminHome;
\ No newline at end of file
+export default AdminHome

src/components/user/homeComponent.tsx

-import React from 'react';
+import React from 'react'
 
 const UserHome = () => {
-    return (<div>Placeholder for the page that will allow the user to start the quiz</div>)
+    return (
+        <div>
+            Placeholder for the page that will allow the user to start the quiz
+        </div>
+    )
 }
-export default UserHome;
\ No newline at end of file
+export default UserHome

src/index.tsx

 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './components/App'
-import {store} from './redux/store'
-import {Provider} from 'react-redux'
+import { store } from './redux/store'
+import { Provider } from 'react-redux'
 import * as serviceWorker from './serviceWorker'
 
 ReactDOM.render(
     <React.StrictMode>
         <Provider store={store}>
-            <App/>
+            <App />
         </Provider>
     </React.StrictMode>,
     document.getElementById('root')