testing setup

Author: jasnoo

.eslintrc

@@ -3,10 +3,12 @@
     "airbnb",
     "plugin:jest/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:testing-library/react", // added in for RTL tests
+    "plugin:jest-dom/recommended" // added in for RTL tests
   ],
   "root": true,
-  "plugins": ["jest", "react", "react-hooks", "@typescript-eslint"],
+  "plugins": ["jest", "react", "react-hooks", "@typescript-eslint", "testing-library", "jest-dom"],
   "rules": {
     "arrow-parens": [2, "as-needed"],
     "import/no-unresolved": "off",

package.json

@@ -20,7 +20,11 @@
       "ts",
       "tsx",
       "js"
-    ]
+    ],
+    "setupFilesAfterEnv": [
+      "@testing-library/jest-dom/extend-expect"
+    ],
+    "testEnvironment": "jest-environment-jsdom"
   },
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --mode production",
@@ -29,6 +33,8 @@
     "devlegacy": "webpack --mode development --watch",
     "test": "jest --verbose --coverage",
     "test-backend": "jest --verbose --coverage src/backend",
+    "test-frontend": "jest --verbose --coverage src/app",
+    "test-newfront": "jest --verbose --coverage src/app/__tests__new",
     "test-on": "./node_modules/.bin/jest $1",
     "docker-test-lint": "eslint --ext .js --ext .jsx src",
     "docs": "typedoc --json docs --inputFiles src/app --inputFiles src/backend --readme docs/readme.md",
@@ -113,6 +119,7 @@
     "@emotion/babel-plugin": "^11.7.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/chai": "^4.2.14",
     "@types/chrome": "^0.0.119",
     "@types/d3": "^7.4.0",
@@ -134,13 +141,16 @@
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^22.21.0",
+    "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-testing-library": "^5.10.3",
     "express": "^4.17.1",
     "jest": "^29.5.0",
     "jest-cli": "^26.1.0",
     "jest-diff": "^26.1.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-runner-eslint": "^2.0.0",
     "jscharting-react": "^1.2.1",
     "prettier": "2.8.4",

src/app/__tests__new/NewTest.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+// import '@testing-library/jest-dom'
+import  '@testing-library/jest-dom/extend-expect' // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+// import NewHiContainer from '../containers/NewHiContainer' 
+import MainContainer from '../containers/MainContainer' 
+
+
+
+test('Main Container should render', () => {
+  render(<MainContainer />);
+  screen.debug();
+  });
+
+
+
+// const Header = () => {
+//   return <h1 className='title'>I am a header</h1>
+// };
+
+
+// test('Test should run, header renders and it has correct stuff', () => {
+//   render(<Header />);
+//   // Extract header
+//   screen.debug();
+// // allows the DOM to be rendered
+
+//   const header = screen.getByRole('heading');
+//   // Use jest-dom assertions
+//   expect(header).toBeInTheDocument();
+//   expect(header).toHaveTextContent('I am a header');
+//   expect(header).toHaveClass('title');
+// });