Add test, eslint

.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest/globals": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:jest/recommended",
+    "airbnb-typescript",
+    "prettier"
+  ],
+  "parserOptions": {
+    "project": ["tsconfig.json"],
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "jest",
+    "import"
+  ],
+  "rules": {
+    // React scope no longer necessary with new JSX transform
+    "react/react-in-jsx-scope": "off",
+    "no-underscore-dangle": 0,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

jest.config.ts

@@ -0,0 +1,23 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: "coverage",
+  testEnvironment: "jsdom",
+  transform: {
+    // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
+    // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        babelConfig: true,
+      },
+    ],
+  },
+  setupFilesAfterEnv: [
+    "<rootDir>/tests/setupTests.ts"
+  ],
+};
+
+export default config;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ypescript-seed",
+  "name": "react-typescript-seed",
   "version": "1.0.0",
   "description": "Seed project for Node.js, Typescript and React",
   "keywords": [],
@@ -8,27 +8,46 @@
   "scripts": {
     "dev": "webpack serve",
     "build": "webpack",
-    "server": "nodemon"
+    "server": "nodemon",
+    "lint": "eslint src/**/*.tsx",
+    "test": "jest",
+    "coverage": "jest --coverage"
   },
   "dependencies": {
+    "@types/jest": "^29.5.12",
     "@types/react-router-dom": "^5.3.3",
     "dotenv": "^16.4.4",
+    "eslint-plugin-react": "^7.33.2",
     "express": "^4.18.2",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/copy-webpack-plugin": "^10.1.0",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/node": "^20.11.18",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.10.0",
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "nodemon": "^3.0.3",
     "style-loader": "^3.3.4",
     "terser-webpack-plugin": "^5.3.10",
+    "ts-jest": "^29.1.2",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "ts-node-dev": "^2.0.0",

src/App.test.tsx

@@ -0,0 +1,12 @@
+
+import { render, screen } from "@testing-library/react";
+import App from './App';
+
+describe("test App.tsx", () => {
+  it("should render the title through props", () => {
+    render(<App title="testing component"/>); 
+    expect(
+      screen.getByText(/testing component/)
+    ).toBeInTheDocument();
+  });
+});

src/App.tsx

@@ -1,10 +1,11 @@
 
+import  React from "react";
 import './App.css';
 
-export default function App() {
-  return (
-    <main>
-      <p>App is running!</p>
-    </main>
-  );
-}
+type AppProps = {
+  title?: string;
+}; /* use `interface` if exporting so that consumers can extend */
+
+const App = ({ title }: AppProps) => <div>{title}</div>;
+
+export default App;

src/index.tsx

@@ -1,14 +1,14 @@
+
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 
-const rootElement = document.getElementById("root");
-
-// New as of React v18.x
-const root = createRoot(rootElement!);
+const rootElement = document.getElementById("root") as HTMLElement;
+const root = createRoot(rootElement);
 
 root.render(
   <StrictMode>
-    <App />
+    <App title="Hello world!"/>
   </StrictMode>
 );
+

tests/setupTests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

tsconfig.json

@@ -8,7 +8,8 @@
     "strict": true /* Enable all strict type-checking options. */,
     "skipLibCheck": true /* Skip type checking all .d.ts files. */,
     "outDir": "dist",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "types": ["@testing-library/jest-dom"]
   },
   "include": ["**/*.ts", "**/*.tsx"]
 }