lab5-1

.bash_history

@@ -0,0 +1,2 @@
+yarn test --coverage --watchAll=false
+exit

package.json

@@ -5,10 +5,7 @@
   "proxy": "http://127.0.0.1:8000",
   "dependencies": {
     "@reduxjs/toolkit": "1.8.5",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "13.5.0",
-    "@types/jest": "27.5.2",
     "@types/node": "16.11.56",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
@@ -18,8 +15,9 @@
     "react-redux": "8.0.2",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^2.1.3",
     "redux": "4.2.0",
+    "testing-library": "^0.0.2",
     "typescript": "4.7.4",
     "web-vitals": "2.1.4"
   },
@@ -46,5 +44,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.1.1",
+    "handlebars": "^4.5.0",
+    "jest": "^29.1.2"
   }
-}
+}

src/App.test.tsx

@@ -1,7 +1,17 @@
+// import { render, screen } from "@testing-library/react";
+import React from 'react';
 import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
 
 import App from "./App";
+import { store } from "./store";
 
-test("renders learn react link", () => {
-  render(<App />);
-});
+test("renders App.tsx", () => {
+  render(
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+  // screen.debug();
+  //expect(true).toBe(false); // This make failing test case
+});

src/App.tsx

@@ -3,6 +3,7 @@ import TodoList from "./containers/TodoList/TodoList"; // can omit.js
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import NewTodo from "./containers/TodoList/NewTodo/NewTodo";
 import TodoDetail from "./components/TodoDetail/TodoDetail";
+import React from 'react';
 
 function App() {
   return (

src/components/Todo/Todo.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from "@testing-library/react";
+import Todo from "./Todo";
+
+describe("<Todo />", () => {
+  it("should render without errors", () => {
+    render(<Todo title={"TODO_TITLE"} done={false} />);
+    screen.getByText("TODO_TITLE"); // Implicit assertion
+    const doneButton = screen.getByText("Done"); // Implicit assertion
+    expect(doneButton).toBeInTheDocument(); // Explicit assertion
+  });
+  it("should render done mark when done is true", () => {
+    render(<Todo title={"TODO_TITLE"} done={true} />);
+    const title = screen.getByText("TODO_TITLE");
+    expect(title.classList.contains("done")).toBe(true);
+    screen.getByText("Undone");
+  });
+  it("should render undone mark when done is false", () => {
+    render(<Todo title={"TODO_TITLE"} done={false} />);
+    const title = screen.getByText("TODO_TITLE");
+    expect(title.classList.contains("done")).toBe(false);
+    screen.getByText("Done");
+  });
+});

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"