added testing-library / jest for testing

jest.config.js

@@ -0,0 +1,27 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './'
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    // '^@/components/(.*)$': '<rootDir>/components/$1',
+    '@shared(.*)$': '<rootDir>/src/components/@shared/$1',
+    '@hooks/(.*)$': '<rootDir>/src/@hooks/$1',
+    '@context/(.*)$': '<rootDir>/src/@context/$1',
+    '@images/(.*)$': '<rootDir>/src/@images/$1',
+    '@utils/(.*)$': '<rootDir>/src/@utils/$1',
+    '@content/(.*)$': '<rootDir>/@content/$1'
+  }
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'

package.json

@@ -9,7 +9,8 @@
     "build": "npm run pregenerate && next build",
     "serve": "serve -s public/",
     "pregenerate": "bash scripts/pregenerate.sh",
-    "test": "npm run pregenerate && npm run lint && npm run type-check",
+    "test": "npm run pregenerate && npm run lint && npm run type-check && npm run jest",
+    "jest": "jest",
     "lint": "eslint --ignore-path .gitignore --ext .js --ext .ts --ext .tsx .",
     "format": "prettier --ignore-path .gitignore './**/*.{css,yml,js,ts,tsx,json}' --write",
     "type-check": "tsc --noEmit",
@@ -26,6 +27,7 @@
     "@oceanprotocol/lib": "^1.0.0-next.35",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.7",
+    "@testing-library/jest-dom": "^5.16.4",
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^0.2.5",
     "@walletconnect/web3-provider": "^1.7.6",
@@ -79,7 +81,10 @@
     "@storybook/addon-links": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.9",
+    "@storybook/testing-react": "^1.2.4",
     "@svgr/webpack": "^6.2.1",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.1.1",
     "@types/chart.js": "^2.9.35",
     "@types/d3": "^7.1.0",
     "@types/js-cookie": "^3.0.1",
@@ -107,11 +112,13 @@
     "file-loader": "^6.2.0",
     "https-browserify": "^1.0.0",
     "husky": "^7.0.4",
+    "jest": "^27.5.1",
     "prettier": "^2.6.0",
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
     "serve": "^13.0.2",
     "stream-http": "^3.2.0",
+    "ts-jest": "^27.1.4",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.5.4"
   },