1st component test(not working yet)

auth-api-tutorial/index.js

@@ -1,8 +1,10 @@
 const express = require('express');
 const app = express();
-const authRoute = require('./routes/auth');
 const mongoose = require('mongoose');
 const dotenv = require('dotenv');
+//Import routes
+const authRoute = require('./routes/auth');
+const postRoute = require('./routes/posts');
 
 //setup to read an env variable from a file
 dotenv.config();
@@ -16,5 +18,6 @@ mongoose.connect(process.env.DB_CONNECT,
 app.use(express.json());
 //Route middleware
 app.use('/api/user', authRoute);
+app.use('/api/posts', postRoute);
 
 app.listen(3000, ()=> console.log('Server is running'));

testing-js/cypress/my-app/package.json

@@ -16,9 +16,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

testing-js/react-components/README.md

@@ -0,0 +1 @@
+# Getting Started with React Component Testing

testing-js/react-components/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-components-testing",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Nikolay Advolodkin < www.nikolay.tech >",
+  "license": "ISC",
+  "dependencies": {
+    "@reach/router": "^1.3.4",
+    "@testing-library/dom": "^7.28.1",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/react-hooks": "^3.4.2",
+    "@testing-library/user-event": "^12.4.0",
+    "history": "^5.0.0",
+    "jest": "^26.6.3",
+    "jest-axe": "^4.1.0",
+    "kcd-scripts": "^7.5.1",
+    "msw": "^0.24.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-test-renderer": "^17.0.1",
+    "react-transition-group": "^4.4.1",
+    "redux": "^4.0.5",
+    "test-data-bot": "^0.8.0",
+    "whatwg-fetch": "^3.5.0"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.12.13"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-react"
+    ]
+  }
+}

testing-js/react-components/src/__tests__/react-dom.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {FavoriteNumber} from '../favorite-number'
+
+// anfn tab
+test('renders a number input witha label', ()=>{
+    const div = document.createElement('div')
+    ReactDOM.render(<FavoriteNumber />, div)
+    console.log(div.innerHTML);
+})

testing-js/react-components/src/favorite-number.js

@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+function FavoriteNumber({min = 1, max = 9}) {
+  const [number, setNumber] = React.useState(0)
+  const [numberEntered, setNumberEntered] = React.useState(false)
+  function handleChange(event) {
+    setNumber(Number(event.target.value))
+    setNumberEntered(true)
+  }
+  const isValid = !numberEntered || (number >= min && number <= max)
+  return (
+    <div>
+      <label htmlFor="favorite-number">Favorite Number</label>
+      <input
+        id="favorite-number"
+        type="number"
+        value={number}
+        onChange={handleChange}
+      />
+      {isValid ? null : <div role="alert">The number is invalid</div>}
+    </div>
+  )
+}
+
+export {FavoriteNumber}