Dependency fixes (#1687)

* Bump eslint-plugin-testing-library from 5.5.1 to 5.6.4

Bumps [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library) from 5.5.1 to 5.6.4.
- [Release notes](https://github.com/testing-library/eslint-plugin-testing-library/releases)
- [Changelog](https://github.com/testing-library/eslint-plugin-testing-library/blob/main/.releaserc.json)
- [Commits](https://github.com/testing-library/eslint-plugin-testing-library/compare/v5.5.1...v5.6.4)

---
updated-dependencies:
- dependency-name: eslint-plugin-testing-library
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* dependency fixes

* typing error fixes

* closes #1694

* upgrade/downgrade all the things

* package updates
* remove storyshot test runs, replace with basic render tests

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

.jest/testRender.ts

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+import { ReactElement } from 'react'
+
+const testRender = (component: ReactElement): void => {
+  it('renders without crashing', () => {
+    const { container } = render(component)
+
+    expect(container.firstChild).toBeInTheDocument()
+  })
+}
+
+export default testRender

.storybook/storyshots.test.tsx

@@ -1,14 +0,0 @@
-import initStoryshots from '@storybook/addon-storyshots'
-import { render, waitFor } from '@testing-library/react'
-
-// Stories are render-tested with @testing-library/react,
-// overwriting default snapshot testing behavior
-initStoryshots({
-  asyncJest: true,
-  test: async ({ story, done }) => {
-    const storyElement = story.render()
-    // render the story with @testing-library/react
-    render(storyElement)
-    await waitFor(() => done())
-  }
-})

package.json

@@ -18,7 +18,7 @@
     "type-check": "tsc --noEmit",
     "deploy:s3": "bash scripts/deploy-s3.sh",
     "postinstall": "husky install",
-    "codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.ropsten.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/",
+    "codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.ropsten.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/ --suppressDeprecationWarning",
     "storybook": "cross-env NODE_ENV=test start-storybook -p 6006 --quiet",
     "storybook:build": "cross-env NODE_ENV=test build-storybook"
   },
@@ -29,15 +29,15 @@
     "@oceanprotocol/lib": "^2.0.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@tippyjs/react": "^4.2.6",
-    "@urql/exchange-refocus": "^0.2.5",
-    "@walletconnect/web3-provider": "^1.7.8",
+    "@urql/exchange-refocus": "^1.0.0",
+    "@walletconnect/web3-provider": "^1.8.0",
     "axios": "^0.27.2",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.29.1",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
     "decimal.js": "^10.3.1",
     "dom-confetti": "^0.2.2",
     "dotenv": "^16.0.1",
-    "filesize": "^9.0.1",
+    "filesize": "^9.0.11",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",
     "is-url-superb": "^6.1.0",
@@ -46,7 +46,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
     "myetherwallet-blockies": "^0.1.1",
-    "next": "^12.1.6",
+    "next": "12.1.6",
     "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-clipboard.js": "^2.0.16",
@@ -64,23 +64,20 @@
     "remove-markdown": "^0.5.0",
     "slugify": "^1.6.5",
     "swr": "^1.3.0",
-    "urql": "^2.2.1",
+    "urql": "^3.0.3",
     "use-dark-mode": "^2.3.1",
-    "web3": "^1.7.4",
-    "web3modal": "^1.9.8",
+    "web3": "^1.8.0",
+    "web3modal": "^1.9.9",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.5.7",
-    "@storybook/addon-storyshots": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.7",
-    "@storybook/react": "^6.5.7",
-    "@storybook/testing-library": "^0.0.11",
-    "@storybook/testing-react": "^1.3.0",
-    "@svgr/webpack": "^6.2.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@svgr/webpack": "^6.3.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/js-cookie": "^3.0.2",
     "@types/loadable__component": "^5.13.4",
     "@types/lodash.debounce": "^4.0.7",
@@ -92,30 +89,29 @@
     "@types/react-paginate": "^7.1.1",
     "@types/remove-markdown": "^0.3.1",
     "@types/yup": "^0.29.14",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.27.1",
-    "apollo": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "apollo": "2.34.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.21.0",
+    "eslint": "^8.23.1",
     "eslint-config-oceanprotocol": "^2.0.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jest-dom": "^4.0.2",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-testing-library": "^5.5.1",
-    "file-loader": "^6.2.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.6.4",
     "https-browserify": "^1.0.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
-    "prettier": "^2.6.2",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
+    "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
-    "serve": "^13.0.2",
+    "serve": "^14.0.1",
     "stream-http": "^3.2.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.7.3"
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.8.3"
   },
   "repository": {
     "type": "git",

src/components/@shared/FormInput/index.tsx

@@ -71,7 +71,7 @@ function checkError(
   parsedFieldName: string[],
   field: FieldInputProps<any>
 ) {
-  if (form?.errors === {}) {
+  if (form?.errors && Object.entries(form?.errors).length === 0) {
     return false
   } else if (
     (form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&

src/components/@shared/atoms/Alert/index.test.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Alert from '@shared/atoms/Alert'
+
+describe('Alert', () => {
+  testRender(<Alert text="Alert text" state="info" />)
+})

src/components/@shared/atoms/Badge/index.test.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Badge from '@shared/atoms/Badge'
+
+describe('Badge', () => {
+  testRender(<Badge label="Badge text" />)
+})

src/components/@shared/atoms/Blockies/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Blockies from '@shared/atoms/Blockies'
+import { Default } from './index.stories'
+
+describe('Blockies', () => {
+  testRender(<Blockies {...Default.args} />)
+})

src/components/@shared/atoms/Container/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Container from '@shared/atoms/Container'
+import { Default } from './index.stories'
+
+describe('Container', () => {
+  testRender(<Container {...Default.args} />)
+})

src/components/@shared/atoms/Copy/index.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { render, act, screen, fireEvent } from '@testing-library/react'
 import { Default } from './index.stories'
+import Copy from '.'
 
 jest.useFakeTimers()
 
 describe('Copy', () => {
   test('should change class on click', () => {
-    render(<Default {...Default.args} />)
+    render(<Copy {...Default.args} />)
 
     const element = screen.getByTitle('Copy to clipboard')
     fireEvent.click(element)
@@ -14,7 +15,7 @@ describe('Copy', () => {
   })
 
   test('should remove class after timer end', () => {
-    render(<Default {...Default.args} />)
+    render(<Copy {...Default.args} />)
 
     const element = screen.getByTitle('Copy to clipboard')
     fireEvent.click(element)

src/components/@shared/atoms/Loader/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Loader from '@shared/atoms/Loader'
+import { Default } from './index.stories'
+
+describe('Loader', () => {
+  testRender(<Loader {...Default.args} />)
+})

src/components/@shared/atoms/Logo/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Logo from '@shared/atoms/Logo'
+import { Default } from './index.stories'
+
+describe('Logo', () => {
+  testRender(<Logo {...Default.args} />)
+})

src/components/@shared/atoms/Status/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Status from '@shared/atoms/Status'
+import { Default } from './index.stories'
+
+describe('Status', () => {
+  testRender(<Status {...Default.args} />)
+})

src/components/@shared/atoms/Time/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import testRender from '../../../../../.jest/testRender'
+import Time from '@shared/atoms/Time'
+import { Default } from './index.stories'
+
+describe('Time', () => {
+  testRender(<Time {...Default.args} />)
+})

src/components/Home/Bookmarks.tsx

@@ -48,7 +48,7 @@ export default function Bookmarks(): ReactElement {
   const newCancelToken = useCancelToken()
 
   useEffect(() => {
-    if (!appConfig?.metadataCacheUri || bookmarks === []) return
+    if (!appConfig?.metadataCacheUri || bookmarks?.length === 0) return
 
     async function init() {
       if (!bookmarks?.length) {

tsconfig.json

@@ -29,5 +29,5 @@
     "incremental": true
   },
   "exclude": ["node_modules", ".next", "*.js"],
-  "include": ["./src/**/*", "./tests/**/*", "./next-env.d.ts", "./content/**/*"]
+  "include": ["./src/**/*", "./.jest/**/*", "./next-env.d.ts", "./content/**/*"]
 }