test tweaks

.eslintrc

@@ -30,7 +30,8 @@
         "plugin:jsx-a11y/recommended",
         "plugin:prettier/recommended",
         "plugin:react/recommended",
-        "plugin:react-hooks/recommended"
+        "plugin:react-hooks/recommended",
+        "plugin:@next/next/recommended"
       ],
       "plugins": ["@typescript-eslint", "react"],
       "rules": {

package-lock.json

@@ -21,6 +21,7 @@
       },
       "devDependencies": {
         "@next/bundle-analyzer": "^11.1.2",
+        "@next/eslint-plugin-next": "^11.1.2",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.1.0",
         "@types/jest": "^27.0.1",
@@ -2280,6 +2281,15 @@
       "resolved": "https://registry.npmjs.org/@next/env/-/env-11.1.2.tgz",
       "integrity": "sha512-+fteyVdQ7C/OoulfcF6vd1Yk0FEli4453gr8kSFbU8sKseNSizYq6df5MKz/AjwLptsxrUeIkgBdAzbziyJ3mA=="
     },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-11.1.2.tgz",
+      "integrity": "sha512-cN+ojHRsufr9Yz0rtvjv8WI5En0RPZRJnt0y16Ha7DD+0n473evz8i1ETEJHmOLeR7iPJR0zxRrxeTN/bJMOjg==",
+      "dev": true,
+      "dependencies": {
+        "glob": "7.1.7"
+      }
+    },
     "node_modules/@next/polyfill-module": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.1.2.tgz",
@@ -6551,9 +6561,9 @@
       }
     },
     "node_modules/glob": {
-      "version": "7.1.6",
+      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
       "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -17065,6 +17075,15 @@
       "resolved": "https://registry.npmjs.org/@next/env/-/env-11.1.2.tgz",
       "integrity": "sha512-+fteyVdQ7C/OoulfcF6vd1Yk0FEli4453gr8kSFbU8sKseNSizYq6df5MKz/AjwLptsxrUeIkgBdAzbziyJ3mA=="
     },
+    "@next/eslint-plugin-next": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-11.1.2.tgz",
+      "integrity": "sha512-cN+ojHRsufr9Yz0rtvjv8WI5En0RPZRJnt0y16Ha7DD+0n473evz8i1ETEJHmOLeR7iPJR0zxRrxeTN/bJMOjg==",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.7"
+      }
+    },
     "@next/polyfill-module": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.1.2.tgz",
@@ -20315,9 +20334,9 @@
       }
     },
     "glob": {
-      "version": "7.1.6",
+      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
       "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",

package.json

@@ -6,9 +6,10 @@
     "start": "next dev",
     "build": "next build",
     "serve": "next start",
-    "test": "npm run lint && NODE_ENV=test jest",
+    "test": "npm run lint && npm run type-check && NODE_ENV=test jest",
-    "test:watch": "npm run lint && NODE_ENV=test jest --watch",
+    "test:watch": "npm run lint && npm run type-check && NODE_ENV=test jest --watch",
     "lint": "eslint --ignore-path .gitignore --ext .js --ext .tsx --ext .ts .",
+    "type-check": "tsc --noEmit",
     "format": "prettier --ignore-path .gitignore '**/*.{css,yml,js,jsx,ts,tsx,json}' --write",
     "analyze": "ANALYZE=true next build"
   },
@@ -27,6 +28,7 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^11.1.2",
+    "@next/eslint-plugin-next": "^11.1.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
     "@types/jest": "^27.0.1",

src/@types/ipfs.d.ts

@@ -1,8 +1,10 @@
 import { CID } from 'ipfs-http-client'
 
+// mirroring AddResult, which is not exported from 'ipfs-http-client'
 export interface FileIpfs {
-  path: string
   cid: CID
   size: number
+  path: string
   mode?: number
+  mtime?: Mtime
 }

src/__tests__/Layout.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import Layout from '../Layout'
 
 describe('Layout', () => {
   it('renders without crashing', () => {
-    const { container } = render(<Layout pageTitle="Hello">Hello</Layout>)
+    render(<Layout pageTitle="Hello">Hello</Layout>)
-    expect(container.firstChild).toBeInTheDocument()
+    expect(screen.getByText('Hello')).toBeInTheDocument()
   })
 })

src/__tests__/Loader.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import Loader from '../components/Loader'
 
 describe('Loader', () => {
-  it('renders without crashing', () => {
+  it('renders without crashing', async () => {
-    const { container } = render(<Loader message="Hello" />)
+    render(<Loader message="Hello" />)
-    expect(container.firstChild).toBeInTheDocument()
+    expect(screen.getByText('Hello')).toBeInTheDocument()
   })
 })

src/__tests__/index.test.tsx

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

src/hooks/use-ipfs-api.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { create, IPFSHTTPClient, Options } from 'ipfs-http-client'
+import type { CIDVersion } from 'multiformats/cid'
 import { formatBytes } from '../utils'
 import { FileDropzone } from '../components/Dropzone'
 import { FileIpfs } from '../@types/ipfs'
@@ -30,7 +31,7 @@ export default function useIpfsApi(config: Options): IpfsApiValue {
 
       const options = {
         wrapWithDirectory: true,
-        cidVersion: 1,
+        cidVersion: 1 as CIDVersion,
         hashAlg: 'sha2-256',
         progress: (length: number) => formatBytes(length, 0)
       }