diff --git a/package-lock.json b/package-lock.json
index 46c2de3..80cc673 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1885,19 +1885,18 @@
}
},
"@types/yargs": {
- "version": "15.0.5",
- "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
- "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
+ "version": "15.0.14",
+ "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
+ "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
"requires": {
"@types/yargs-parser": "*"
}
},
"ansi-styles": {
- "version": "4.2.1",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
- "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"requires": {
- "@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
@@ -2086,6 +2085,7 @@
"version": "27.0.1",
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.0.1.tgz",
"integrity": "sha512-HTLpVXHrY69556ozYkcq47TtQJXpcWAWfkoqz+ZGz2JnmZhzlRjprCIyFnetSy8gpDWwTTGBcRVv1J1I1vBrHw==",
+ "dev": true,
"requires": {
"jest-diff": "^27.0.0",
"pretty-format": "^27.0.0"
@@ -2095,6 +2095,7 @@
"version": "27.0.6",
"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.0.6.tgz",
"integrity": "sha512-aSquT1qa9Pik26JK5/3rvnYb4bGtm1VFNesHKmNTwmPIgOrixvhL2ghIvFRNEpzy3gU+rUgjIF/KodbkFAl++g==",
+ "dev": true,
"requires": {
"@types/istanbul-lib-coverage": "^2.0.0",
"@types/istanbul-reports": "^3.0.0",
@@ -2107,6 +2108,7 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
"integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+ "dev": true,
"requires": {
"@types/istanbul-lib-report": "*"
}
@@ -2115,6 +2117,7 @@
"version": "16.0.4",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+ "dev": true,
"requires": {
"@types/yargs-parser": "*"
}
@@ -2123,6 +2126,7 @@
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dev": true,
"requires": {
"color-convert": "^2.0.1"
}
@@ -2131,6 +2135,7 @@
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
@@ -2140,6 +2145,7 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
"requires": {
"color-name": "~1.1.4"
}
@@ -2147,22 +2153,26 @@
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
- "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
},
"diff-sequences": {
"version": "27.0.6",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.0.6.tgz",
- "integrity": "sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ=="
+ "integrity": "sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==",
+ "dev": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
- "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true
},
"jest-diff": {
"version": "27.0.6",
"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.0.6.tgz",
"integrity": "sha512-Z1mqgkTCSYaFgwTlP/NUiRzdqgxmmhzHY1Tq17zL94morOHfHu3K4bgSgl+CR4GLhpV8VxkuOYuIWnQ9LnFqmg==",
+ "dev": true,
"requires": {
"chalk": "^4.0.0",
"diff-sequences": "^27.0.6",
@@ -2173,12 +2183,14 @@
"jest-get-type": {
"version": "27.0.6",
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.0.6.tgz",
- "integrity": "sha512-XTkK5exIeUbbveehcSR8w0bhH+c0yloW/Wpl+9vZrjzztCPWrxhHwkIFpZzCt71oRBsgxmuUfxEqOYoZI2macg=="
+ "integrity": "sha512-XTkK5exIeUbbveehcSR8w0bhH+c0yloW/Wpl+9vZrjzztCPWrxhHwkIFpZzCt71oRBsgxmuUfxEqOYoZI2macg==",
+ "dev": true
},
"pretty-format": {
"version": "27.0.6",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.0.6.tgz",
"integrity": "sha512-8tGD7gBIENgzqA+UBzObyWqQ5B778VIFZA/S66cclyd5YkFLYs2Js7gxDKf0MXtTc9zcS7t1xhdfcElJ3YIvkQ==",
+ "dev": true,
"requires": {
"@jest/types": "^27.0.6",
"ansi-regex": "^5.0.0",
@@ -2189,19 +2201,22 @@
"ansi-styles": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
- "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
+ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+ "dev": true
}
}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
- "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+ "dev": true
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dev": true,
"requires": {
"has-flag": "^4.0.0"
}
@@ -2342,19 +2357,18 @@
}
},
"@types/yargs": {
- "version": "15.0.5",
- "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
- "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
+ "version": "15.0.14",
+ "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
+ "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
"requires": {
"@types/yargs-parser": "*"
}
},
"ansi-styles": {
- "version": "4.2.1",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
- "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"requires": {
- "@types/color-name": "^1.1.1",
"color-convert": "^2.0.1"
}
},
@@ -7194,6 +7208,11 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
"integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
},
+ "immutable": {
+ "version": "3.7.6",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
+ "integrity": "sha1-E7TTyxK++hVIKib+Gy665kAHHks="
+ },
"import-cwd": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7819,6 +7838,11 @@
"detect-newline": "^2.1.0"
}
},
+ "jest-dom": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/jest-dom/-/jest-dom-4.0.0.tgz",
+ "integrity": "sha512-gBxYZlZB1Jgvf2gP2pRfjjUWF8woGBHj/g5rAQgFPB/0K2atGuhVcPO+BItyjWeKg9zM+dokgcMOH01vrWVMFA=="
+ },
"jest-each": {
"version": "24.9.0",
"resolved": "https://registry.npmjs.org/jest-each/-/jest-each-24.9.0.tgz",
@@ -11510,6 +11534,21 @@
"workbox-webpack-plugin": "4.3.1"
}
},
+ "react-shallow-testutils": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/react-shallow-testutils/-/react-shallow-testutils-2.0.0.tgz",
+ "integrity": "sha1-kIe0CzaLEkZ0x7/Pn91q2YORSpc="
+ },
+ "react-test-render": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/react-test-render/-/react-test-render-1.1.2.tgz",
+ "integrity": "sha512-XurcR3Eh0TwFopBShDNgPny29Z8wczAFnKsxUqSSgNN6FrpsNg39Q3/13bK5oBFWOLod3enZG698HZNlJ3oRsw==",
+ "requires": {
+ "immutable": "3.7.x",
+ "lodash": "^4.17.15",
+ "react-shallow-testutils": "2.0.x"
+ }
+ },
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
diff --git a/package.json b/package.json
index c52d9c4..c34c35f 100644
--- a/package.json
+++ b/package.json
@@ -7,17 +7,18 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
- "@types/jest": "^27.0.1",
"@types/node": "^16.6.1",
"@types/react": "^17.0.18",
"@types/react-dom": "^17.0.9",
"firebase": "^7.20.0",
+ "jest-dom": "^4.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-firebase-hooks": "^2.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
+ "react-test-render": "^1.1.2",
"redux-logger": "^3.0.6",
"typescript": "^4.3.5"
},
@@ -43,6 +44,7 @@
]
},
"devDependencies": {
+ "@types/jest": "^27.0.1",
"@types/react-router-dom": "^5.1.8",
"@types/redux-logger": "^3.0.9"
}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 4db7ebc..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- const { getByText } = render();
- const linkElement = getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/App.tsx b/src/App.tsx
index 7242d0b..9aa2237 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from "react";
import "./App.css";
import firebase from "./firebase";
-import Counters from "./Counters";
+import Counters from "./components/Counters";
import { Route, BrowserRouter } from "react-router-dom";
function App() {
diff --git a/src/Counters.tsx b/src/Counters.tsx
deleted file mode 100644
index 7fb4874..0000000
--- a/src/Counters.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import { RootStateOrAny, useSelector } from "react-redux";
-import store from "./redux/index";
-import slice from "./redux/counter/slice";
-
-const Counters = () => {
- const countersState = useSelector((state: RootStateOrAny) => state.countersState);
- const { dispatch } = store;
-
- return (
- <>
- The counter value is {countersState.counters}
-
-
-
- )
-}
-
-export default Counters
diff --git a/src/components/Counters.tsx b/src/components/Counters.tsx
new file mode 100644
index 0000000..814e00f
--- /dev/null
+++ b/src/components/Counters.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { RootStateOrAny, useSelector } from "react-redux";
+import store from "../redux/index";
+import slice from "../redux/counter/slice";
+
+const Counters = () => {
+ const countersState = useSelector(
+ (state: RootStateOrAny) => state.countersState
+ );
+ const { dispatch } = store;
+
+ return (
+
+
The counter value is {countersState.counters}
+
+
+