diff --git a/package-lock.json b/package-lock.json
index 5926b041..7129380e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,14 @@
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
- "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
+ },
+ "devDependencies": {
+ "@testing-library/react": "^14.3.0"
}
},
"node_modules/@adobe/css-tools": {
@@ -3404,21 +3406,21 @@
}
},
"node_modules/@testing-library/dom": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
- "integrity": "sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==",
+ "version": "9.3.4",
+ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
+ "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
- "@types/aria-query": "^4.2.0",
- "aria-query": "^5.0.0",
+ "@types/aria-query": "^5.0.1",
+ "aria-query": "5.1.3",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
- "lz-string": "^1.4.4",
+ "lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
- "node": ">=12"
+ "node": ">=14"
}
},
"node_modules/@testing-library/dom/node_modules/ansi-styles": {
@@ -3584,16 +3586,17 @@
}
},
"node_modules/@testing-library/react": {
- "version": "13.4.0",
- "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
- "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+ "version": "14.3.0",
+ "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.3.0.tgz",
+ "integrity": "sha512-AYJGvNFMbCa5vt1UtDCa/dcaABrXq8gph6VN+cffIx0UeA0qiGqS+sT60+sb+Gjc8tGXdECWYQgaF0khf8b+Lg==",
+ "dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5",
- "@testing-library/dom": "^8.5.0",
+ "@testing-library/dom": "^9.0.0",
"@types/react-dom": "^18.0.0"
},
"engines": {
- "node": ">=12"
+ "node": ">=14"
},
"peerDependencies": {
"react": "^18.0.0",
@@ -3632,9 +3635,9 @@
}
},
"node_modules/@types/aria-query": {
- "version": "4.2.2",
- "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
- "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig=="
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+ "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="
},
"node_modules/@types/babel__core": {
"version": "7.1.20",
@@ -4057,7 +4060,8 @@
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
- "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+ "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+ "dev": true
},
"node_modules/@types/q": {
"version": "1.5.5",
@@ -4078,6 +4082,7 @@
"version": "18.0.25",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz",
"integrity": "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==",
+ "dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -4088,6 +4093,7 @@
"version": "18.0.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.9.tgz",
"integrity": "sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==",
+ "dev": true,
"dependencies": {
"@types/react": "*"
}
@@ -4108,7 +4114,8 @@
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
- "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+ "dev": true
},
"node_modules/@types/semver": {
"version": "7.3.13",
@@ -6303,7 +6310,8 @@
"node_modules/csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
- "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+ "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+ "dev": true
},
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
@@ -11680,9 +11688,9 @@
}
},
"node_modules/lz-string": {
- "version": "1.4.4",
- "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
- "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
"bin": {
"lz-string": "bin/bin.js"
}
@@ -19255,17 +19263,17 @@
}
},
"@testing-library/dom": {
- "version": "8.19.0",
- "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.0.tgz",
- "integrity": "sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==",
+ "version": "9.3.4",
+ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
+ "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
- "@types/aria-query": "^4.2.0",
- "aria-query": "^5.0.0",
+ "@types/aria-query": "^5.0.1",
+ "aria-query": "5.1.3",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
- "lz-string": "^1.4.4",
+ "lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"dependencies": {
@@ -19392,12 +19400,13 @@
}
},
"@testing-library/react": {
- "version": "13.4.0",
- "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
- "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
+ "version": "14.3.0",
+ "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.3.0.tgz",
+ "integrity": "sha512-AYJGvNFMbCa5vt1UtDCa/dcaABrXq8gph6VN+cffIx0UeA0qiGqS+sT60+sb+Gjc8tGXdECWYQgaF0khf8b+Lg==",
+ "dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
- "@testing-library/dom": "^8.5.0",
+ "@testing-library/dom": "^9.0.0",
"@types/react-dom": "^18.0.0"
}
},
@@ -19420,9 +19429,9 @@
"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
},
"@types/aria-query": {
- "version": "4.2.2",
- "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
- "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig=="
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+ "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="
},
"@types/babel__core": {
"version": "7.1.20",
@@ -19792,7 +19801,8 @@
"@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
- "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+ "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+ "dev": true
},
"@types/q": {
"version": "1.5.5",
@@ -19813,6 +19823,7 @@
"version": "18.0.25",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz",
"integrity": "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==",
+ "dev": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -19823,6 +19834,7 @@
"version": "18.0.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.9.tgz",
"integrity": "sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==",
+ "dev": true,
"requires": {
"@types/react": "*"
}
@@ -19843,7 +19855,8 @@
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
- "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+ "dev": true
},
"@types/semver": {
"version": "7.3.13",
@@ -21448,7 +21461,8 @@
"csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
- "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+ "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+ "dev": true
},
"damerau-levenshtein": {
"version": "1.0.8",
@@ -25357,9 +25371,9 @@
}
},
"lz-string": {
- "version": "1.4.4",
- "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
- "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ=="
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="
},
"magic-string": {
"version": "0.25.9",
diff --git a/package.json b/package.json
index a40f5f6c..bb1f8414 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,6 @@
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
- "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -47,5 +46,8 @@
"statements": 100
}
}
+ },
+ "devDependencies": {
+ "@testing-library/react": "^14.3.0"
}
}
diff --git a/src/tests/Counter.test.js b/src/tests/Counter.test.js
index 36cc18aa..67383f1a 100644
--- a/src/tests/Counter.test.js
+++ b/src/tests/Counter.test.js
@@ -1,22 +1,45 @@
// import necessary react testing library helpers here
+import { render, fireEvent, screen } from '@testing-library/react';
// import the Counter component here
+import Counter from '../components/Counter';
-beforeEach(() => {
- // Render the Counter component here
-})
test('renders counter message', () => {
// Complete the unit test below based on the objective in the line above
+ render();
+ const counterMessage = screen.getByText(/Counter/);
+ expect(counterMessage).toBeInTheDocument();
});
test('should render initial count with value of 0', () => {
// Complete the unit test below based on the objective in the line above
+ const { getByTestId } = render();
+ const initialValue = Number(getByTestId("count").textContent);
+ expect(initialValue).toEqual(0);
});
test('clicking + increments the count', () => {
// Complete the unit test below based on the objective in the line above
+ const { getByTestId, getByRole } = render();
+ const incrementBtn = getByRole("button", {name: "+"});
+
+ //now click the button
+ fireEvent.click(incrementBtn);
+
+ //now test to see that our count value incremented
+ const countValue = Number(getByTestId("count").textContent);
+ expect(countValue).toEqual(1);
});
test('clicking - decrements the count', () => {
// Complete the unit test below based on the objective in the line above
+ const { getByTestId, getByRole } = render();
+ const incrementBtn = getByRole("button", {name: "-"});
+
+ //now click the button
+ fireEvent.click(incrementBtn);
+
+ //now test to see that our count value incremented
+ const countValue = Number(getByTestId("count").textContent);
+ expect(countValue).toEqual(-1);
});