package updates, fix test runs

.eslintrc

@@ -1,13 +1,22 @@
 {
   "extends": ["eslint:recommended", "prettier"],
-  "env": { "es6": true, "browser": true, "node": true },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": { "jsx": true }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2020": true,
+    "jest": true
+  },
   "settings": { "react": { "version": "detect" } },
   "overrides": [
     {
       "files": ["**/*.ts", "**/*.tsx"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2020,
         "sourceType": "module",
         "ecmaFeatures": {
           "jsx": true
@@ -19,8 +28,6 @@
         "plugin:@typescript-eslint/eslint-recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:jsx-a11y/recommended",
-        "prettier/@typescript-eslint",
-        "prettier/react",
         "plugin:prettier/recommended",
         "plugin:react/recommended",
         "plugin:react-hooks/recommended"

jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest/setup.ts'],
   globals: {
     'ts-jest': {
-      tsConfig: 'jest.tsconfig.json'
+      tsconfig: 'jest.tsconfig.json'
     }
   },
   moduleNameMapper: {
@@ -19,5 +19,6 @@ module.exports = {
     '<rootDir>/coverage'
   ],
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/@types/**/*'],
-  collectCoverage: true
+  collectCoverage: true,
+  testEnvironment: 'jsdom'
 }

next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -15,38 +15,37 @@
   "author": "Matthias Kretschmann <m@kretschmann.io>",
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "ipfs-http-client": "^52.0.3",
-    "next": "^10.0.7",
+    "next": "^11.1.2",
-    "next-seo": "^4.20.0",
+    "next-seo": "^4.26.0",
     "next-svgr": "^0.0.2",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
-    "react-dropzone": "^11.3.1",
+    "react-dropzone": "^11.3.4",
     "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^10.0.7",
+    "@next/bundle-analyzer": "^11.1.2",
-    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/react": "^12.1.0",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.0.1",
-    "@types/next-seo": "^2.1.2",
+    "@types/node": "^16.9.1",
-    "@types/node": "^14.14.31",
     "@types/react": "^17.0.2",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.8",
     "eslint": "^7.21.0",
-    "eslint-config-prettier": "^7.2.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^26.6.3",
+    "jest": "^27.1.1",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.4.0",
-    "ts-jest": "^26.5.2",
+    "ts-jest": "^27.0.5",
-    "typescript": "^4.2.2"
+    "typescript": "^4.4.3"
   },
   "engines": {
     "node": "14.x"

src/__tests__/index.test.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
-import { render, wait } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import Home from '../pages'
 
 describe('Home', () => {
   it('renders without crashing', async () => {
     const { container } = render(<Home />)
-    await wait()
     expect(container.firstChild).toBeInTheDocument()
   })
 })

src/components/Dropzone.tsx

@@ -17,16 +17,13 @@ export default function Dropzone({
   multiple?: boolean
   error?: string
 }): ReactElement {
-  const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [
+  const onDrop = useCallback(
-    handleOnDrop
+    (acceptedFiles) => handleOnDrop(acceptedFiles),
-  ])
+    [handleOnDrop]
+  )
 
-  const {
+  const { getRootProps, getInputProps, isDragActive, isDragReject } =
-    getRootProps,
+    useDropzone({ onDrop })
-    getInputProps,
-    isDragActive,
-    isDragReject
-  } = useDropzone({ onDrop })
 
   return (
     <div

src/pages/_app.tsx

@@ -1,16 +1,13 @@
 import '../styles/global.css'
-import App from 'next/app'
 import React from 'react'
+import { AppProps } from 'next/app'
 import Typekit from '../components/Typekit'
 
-export default class MyApp extends App {
+export default function App({ Component, pageProps }: AppProps): JSX.Element {
-  render() {
+  return (
-    const { Component, pageProps } = this.props
+    <>
-    return (
+      <Typekit />
-      <>
+      <Component {...pageProps} />
-        <Typekit />
+    </>
-        <Component {...pageProps} />
+  )
-      </>
-    )
-  }
 }

src/pages/index.tsx

@@ -7,7 +7,7 @@ import styles from './index.module.css'
 const Add = dynamic(() => import('../components/Add'))
 const Info = dynamic(() => import('../components/Info'))
 
-const Home = () => (
+const Home = (): JSX.Element => (
   <Layout>
     <header className={styles.header}>
       <h1 className={styles.title}>{title}</h1>