Setup basic Jest tests

Author: modularcoder

package-lock.json

@@ -71,6 +71,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "fork-ts-checker-webpack-plugin": "^6.2.5",
     "gh-pages": "^3.1.0",
+    "jest-canvas-mock": "^2.3.1",
     "msw": "^0.28.2",
     "prettier": "2.2.1",
     "react-app-rewired": "^2.1.8",
@@ -93,5 +94,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "@/(.*)": "<rootDir>/src/$1"
+    }
   }
 }

package.json

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import App from './App'
+
+test('renders without crashing', () => {
+  render(<App />)
+  // const linkElement = screen.getByText(/learn react/i)
+  // expect(linkElement).toBeInTheDocument()
+})

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import KeyMetrics from './KeyMetrics'
+
+test('renders without crashing', () => {
+  render(<KeyMetrics />)
+  // const linkElement = screen.getByText(/learn react/i)
+  // expect(linkElement).toBeInTheDocument()
+})

src/App.test.tsx

@@ -56,7 +56,7 @@ const numbers = [
   },
 ]
 
-const KeyMetrics = () => {
+const KeyMetrics: React.FC = () => {
   const classes = useStyles()
 
   return (

src/App.test.tsxl

@@ -14,11 +14,9 @@ import { Line } from 'react-chartjs-2'
 
 import { subscriptionsItems, subscriptionsHistoryChart } from './data'
 
-const Subscriptions = () => {
+const Subscriptions: React.FC = () => {
   const classes = useStyles()
 
-  console.log('subscriptionsHistoryChart', subscriptionsHistoryChart)
-
   return (
     <Card>
       <CardHeader

src/Dashboard/KeyMetrics/KeyMetrics.test.tsx

@@ -1,7 +1,11 @@
 import { setupWorker } from 'msw'
+import { setupServer } from 'msw/node'
 import usersMocks from './usersMocks'
 
-const { start } = setupWorker(...usersMocks)
+const start =
+  process.env.NODE_ENV !== 'test'
+    ? setupWorker(...usersMocks).start
+    : setupServer(...usersMocks)
 
 export default {
   init: start,

src/Dashboard/KeyMetrics/KeyMetrics.tsx

@@ -23,7 +23,7 @@ const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
       </List>
 
       {itemsCore.map((item: ISidebarNavListItem) => {
-        return <SidebarNavListItem {...item} />
+        return <SidebarNavListItem {...item} key={item.name} />
       })}
 
       <List className={classes.navList} disablePadding>