Move jest and eslint configs to their own files.

Fix the CompletedFilesCounter test

Author: markrickert

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: ['react-app'],
+  plugins: ['prettier', '@emotion'],
+  rules: {
+    'prettier/prettier': 'error',
+    'jsx-a11y/accessible-emoji': 'off',
+    'import/no-anonymous-default-export': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+  },
+  overrides: [
+    {
+      files: ['src/__tests__/**/*'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+}

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)?$': 'ts-jest',
+  },
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  testMatch: ['<rootDir>>/__tests__/**/*.spec.(js|jsx|ts|tsx)'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+}

package.json

@@ -41,6 +41,7 @@
     "@jest/globals": "^29.7.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.12",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/markdown-to-jsx": "^7.0.1",
     "@types/node": "^20.11.16",
     "@types/react": "18.2.0",
@@ -55,7 +56,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "gh-pages": "5.0.0",
     "husky": "8.0.3",
-    "jest-image-snapshot": "6.1.0",
+    "jest-image-snapshot": "6.4.0",
     "prettier": "2.8.4",
     "pretty-quick": "3.1.3",
     "puppeteer": "10.0.0",
@@ -75,45 +76,10 @@
       "last 1 safari version"
     ]
   },
-  "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "react-app"
-    ],
-    "plugins": [
-      "prettier",
-      "@emotion"
-    ],
-    "rules": {
-      "prettier/prettier": "error",
-      "jsx-a11y/accessible-emoji": "off",
-      "import/no-anonymous-default-export": "off",
-      "react-hooks/exhaustive-deps": "off"
-    },
-    "overrides": [
-      {
-        "files": [
-          "src/__tests__/**/*"
-        ],
-        "env": {
-          "jest": true
-        }
-      }
-    ]
-  },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx|ts|tsx)\"",
       "pre-push": "yarn run lint"
     }
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "testMatch": [
-      "**/__tests__/**/*.spec.(js|jsx|ts|tsx)"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.js"
-    ]
   }
 }

src/__tests__/components/common/CompletedFilesCounter.spec.tsx

@@ -1,21 +1,33 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import CompletedFilesCounter from '../../../components/common/CompletedFilesCounter'
+import { lightTheme } from '../../../theme'
 
 it('renders without crashing', () => {
-  const { container } = render(<CompletedFilesCounter />)
+  const { container } = render(
+    <CompletedFilesCounter
+      completed={10}
+      total={11}
+      popoverContent=""
+      popoverCursorType="pointer"
+      theme={lightTheme}
+    />
+  )
 
   expect(container).toMatchInlineSnapshot(`
     <div>
       <div
-        class="css-11o7zpc"
+        class="css-cs3rl"
       >
         <span>
           <span
             class="completedAmount"
-          />
+          >
+            10
+          </span>
            
           /
+          11
         </span>
         <div
           style="position: relative;"