adding unit tests

package.json

@@ -12,13 +12,20 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "typescript": "^4.2.3",
     "web-vitals": "^1.0.1"
   },
+  "jest": {
+    "transform": {
+      "^.+\\.(js|jsx)$": "babel-jest"
+   }
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "tsc",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "test:watch": "jest --watch"
   },
   "eslintConfig": {
     "extends": [
@@ -42,7 +49,6 @@
     "@types/lodash": "^4.14.168",
     "@types/lodash.debounce": "^4.0.6",
     "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
-    "typescript": "^4.2.3"
+    "@types/react-dom": "^17.0.3"
   }
 }

src/App.test.tsx

@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+import App from "./App";
+
+describe("components", () => {
+	test("renders UserInput", () => {
+		const { getByText } = render(<App />);
+		const userInputHeadingText = getByText(/User realtime input/i);
+		expect(userInputHeadingText).toBeInTheDocument();
+	});
+	test("renders DbLike", async () => {
+		const { getByText } = render(<App />);
+		const userInputHeadingText = getByText(/DB like saved output/i);
+		expect(userInputHeadingText).toBeInTheDocument();
+	});
+});

src/App.tsx

@@ -14,7 +14,7 @@ function App() {
 				<Paper square>
 					<Grid justify="center" container>
 						<Grid xs={12} sm={6} item>
-							<UserInput setSavedValue={setSavedValue} />
+							<UserInput setSavedValue={setSavedValue} value={savedValue} />
 						</Grid>
 						<Grid xs={12} sm={6} item>
 							<DbLike debouncedValue={savedValue} />

src/DbLike.tsx

@@ -11,7 +11,9 @@ const DbLike = (props: { debouncedValue: string }) => {
 			height="100%"
 		>
 			<h2>DB like saved output</h2>
-			<Typography component="p">{props.debouncedValue}</Typography>
+			<Typography component="p" data-testid="db-output">
+				{props.debouncedValue}
+			</Typography>
 		</Box>
 	);
 };

src/UserInput.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 import debounce from "lodash.debounce";
-import { TextField, Box } from "@material-ui/core";
+import { TextField, Box, FormControl } from "@material-ui/core";
 
-const UserInput = (props: { setSavedValue: Function }) => {
+const UserInput = (props: { setSavedValue: Function; value: any }) => {
 	const debouncedSave = useCallback(
 		debounce((newValue: any) => props.setSavedValue(newValue), 1000),
 		[]
@@ -16,14 +16,18 @@ const UserInput = (props: { setSavedValue: Function }) => {
 	return (
 		<Box p={2} display="flex" flexDirection="column" height="100%">
 			<h2>User realtime input</h2>
-			<TextField
-				multiline
-				rows={4}
-				fullWidth
-				variant="outlined"
-				label="Type message here"
-				onChange={(e) => saveMessage(e)}
-			/>
+			<FormControl>
+				<TextField
+					multiline
+					rows={4}
+					fullWidth
+					variant="outlined"
+					label="Type message here"
+					onChange={(e) => saveMessage(e)}
+					data-testid="user-input"
+					defaultValue={props.value}
+				/>
+			</FormControl>
 		</Box>
 	);
 };

src/tests/DbLike.test.tsx

@@ -0,0 +1,41 @@
+import {
+	render,
+	fireEvent,
+	screen,
+	waitFor,
+	getByText,
+} from "@testing-library/react";
+
+import UserInput from "../UserInput";
+import DbLike from "../DbLike";
+
+const userInputDefaultProps = {
+	setSavedValue: jest.fn(),
+	value: "test",
+};
+
+const dbLikeDefaultProps = {
+	debouncedValue: "",
+};
+
+beforeEach(() => render(<DbLike {...dbLikeDefaultProps} />));
+
+describe("DB like output", () => {
+	test("renders do like heading", () => {
+		const dbLikeHeading = screen.getByText(/DB like saved output/i);
+		expect(dbLikeHeading).toBeInTheDocument();
+	});
+
+	test("should change one second after user typed", async () => {
+		const { getByRole } = render(<UserInput {...userInputDefaultProps} />);
+		const textArea = getByRole("textbox") as HTMLInputElement;
+		fireEvent.change(textArea, { target: { value: "hello" } });
+		const { container } = render(<DbLike debouncedValue={textArea.value} />);
+		await waitFor(
+			() => expect(getByText(container, "hello")).toBeInTheDocument(),
+			{
+				timeout: 2000,
+			}
+		);
+	});
+});

src/tests/UserInput.test.tsx

@@ -0,0 +1,23 @@
+import { render, fireEvent, screen } from "@testing-library/react";
+
+import UserInput from "../UserInput";
+
+const defaultProps = {
+	setSavedValue: jest.fn(),
+	value: "test",
+};
+
+beforeEach(() => render(<UserInput {...defaultProps} />));
+
+describe("user input", () => {
+	test("renders user input heading", () => {
+		const userInputHeading = screen.getByText(/User realtime input/i);
+		expect(userInputHeading).toBeInTheDocument();
+	});
+
+	test("should be able to type", async () => {
+		const textArea = screen.getByRole("textbox") as HTMLInputElement;
+		fireEvent.change(textArea, { target: { value: "hello" } });
+		expect(textArea.value).toBe("hello");
+	});
+});