feat: jest testing setup, example tests (#181)

__mocks__/fileMock.js

@@ -0,0 +1,6 @@
+module.exports = {
+  src: '/img.jpg',
+  height: 24,
+  width: 24,
+  blurDataURL: 'data:image/png;base64,imagedata',
+}

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

__mocks__/svgMock.js

@@ -0,0 +1,7 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+
+const SvgrMock = React.forwardRef((props, ref) => <svg ref={ref} {...props} />)
+
+export const ReactComponent = SvgrMock
+export default SvgrMock

__tests__/components/Account/AccountDetails.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+
+import * as useParams from 'utils/route'
+import AccountDetails from 'components/Account/AccountDetails'
+
+jest.mock('utils/route')
+const mockedUseParams = useParams.default as jest.Mock
+
+describe('<AccountDetails />', () => {
+  afterAll(() => {
+    mockedUseParams.mockRestore()
+  })
+
+  it('renders account details WHEN accountId specified in the params', () => {
+    mockedUseParams.mockReturnValue({ accountId: 1 })
+    render(<AccountDetails />)
+
+    const container = screen.queryByTestId('account-details')
+    expect(container).toBeInTheDocument()
+  })
+
+  it('does not render WHEN accountId is NOT specified in the params', () => {
+    mockedUseParams.mockReturnValue({ accountId: null })
+    render(<AccountDetails />)
+
+    const container = screen.queryByTestId('account-details')
+    expect(container).not.toBeInTheDocument()
+  })
+})

__tests__/utils/vaults.test.ts

@@ -0,0 +1,33 @@
+import { getVaultMetaData } from 'utils/vaults'
+import * as constants from 'constants/env'
+
+jest.mock('constants/env', () => ({
+  __esModule: true,
+  get IS_TESTNET() {
+    return true
+  },
+}))
+
+describe('getVaultMetaData()', () => {
+  afterAll(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('returns the MAINNET vault of given address WHEN environment configured to mainnet', () => {
+    jest.spyOn(constants, 'IS_TESTNET', 'get').mockReturnValue(false)
+
+    const testAddress = 'osmo1g3kmqpp8608szfp0pdag3r6z85npph7wmccat8lgl3mp407kv73qlj7qwp'
+    const testVaultName = 'OSMO-ATOM'
+
+    expect(getVaultMetaData(testAddress)?.name).toBe(testVaultName)
+  })
+
+  it('returns the TESTNET vault of given address WHEN environment configured to testnet', () => {
+    jest.spyOn(constants, 'IS_TESTNET', 'get').mockReturnValue(true)
+
+    const testAddress = 'osmo1q40xvrzpldwq5he4ftsf7zm2jf80tj373qaven38yqrvhex8r9rs8n94kv'
+    const testVaultName = 'OSMO-USDC.n'
+
+    expect(getVaultMetaData(testAddress)?.name).toBe(testVaultName)
+  })
+})

jest.config.js

@@ -0,0 +1,50 @@
+module.exports = {
+  collectCoverage: true,
+  coverageProvider: 'v8',
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/*.d.ts',
+    '!**/node_modules/**',
+    '!<rootDir>/out/**',
+    '!<rootDir>/.next/**',
+    '!<rootDir>/*.config.js',
+    '!<rootDir>/coverage/**',
+  ],
+  moduleNameMapper: {
+    // Handle CSS imports (with CSS modules)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+
+    // Handle CSS imports (without CSS modules)
+    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+
+    // Handle image imports
+    // https://jestjs.io/docs/webpack#handling-static-assets
+    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$/i': `<rootDir>/__mocks__/fileMock.js`,
+    '^.+\\.svg$': `<rootDir>/__mocks__/svgMock.js`,
+
+    // Handle module aliases
+    '^app/(.*)$': '<rootDir>/src/app/$1',
+    '^components/(.*)$': '<rootDir>/src/components/$1',
+    '^constants/(.*)$': '<rootDir>/src/constants/$1',
+    '^fonts/(.*)$': '<rootDir>/src/fonts/$1',
+    '^hooks/(.*)$': '<rootDir>/src/hooks/$1',
+    '^pages/(.*)$': '<rootDir>/src/pages/$1',
+    '^store/(.*)$': '<rootDir>/src/store/$1',
+    '^styles/(.*)$': '<rootDir>/src/styles/$1',
+    '^types/(.*)$': '<rootDir>/src/types/$1',
+    '^utils/(.*)$': '<rootDir>/src/utils/$1',
+
+    '^store': '<rootDir>/src/store',
+  },
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
+  testEnvironment: 'jsdom',
+  transform: {
+    // Use babel-jest to transpile tests with the next/babel preset
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  transformIgnorePatterns: ['/node_modules/', '^.+\\.module\\.(css|sass|scss)$'],
+}

jest.setup.js

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

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev",
+    "test": "jest",
     "lint": "eslint ./src/ && yarn prettier-check",
     "format": "eslint ./src/ --fix && prettier --write ./src/",
     "prettier-check": "prettier --ignore-path .gitignore --check ./src/",
@@ -42,7 +43,13 @@
     "autoprefixer": "^10.4.14",
     "eslint": "8.40.0",
     "eslint-config-next": "^13.4.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "babel-jest": "^29.5.0",
     "eslint-plugin-import": "^2.27.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.2.8",

src/components/Account/AccountDetails.tsx

@@ -10,7 +10,10 @@ export default function AccountDetails() {
   const hasAccount = isNumber(params.accountId)
 
   return hasAccount ? (
-    <div className='fixed right-4 top-[89px] w-16 rounded-base border border-white/20 bg-white/5 backdrop-blur-sticky'>
+    <div
+      data-testid='account-details'
+      className='fixed right-4 top-[89px] w-16 rounded-base border border-white/20 bg-white/5 backdrop-blur-sticky'
+    >
       <div className='flex w-full flex-wrap justify-center py-4'>
         <Gauge tooltip='Health Factor' value={0.2} icon={<Heart />} />
         <Text size='2xs' className='mb-0.5 mt-1 w-full text-center text-white/50'>

src/store/index.ts

@@ -1,4 +1,4 @@
-import create, { GetState, SetState, StoreApi, UseBoundStore } from 'zustand'
+import { create, GetState, SetState, StoreApi, UseBoundStore } from 'zustand'
 import { devtools } from 'zustand/middleware'
 
 import createBroadcastSlice from 'store/slices/broadcast'
@@ -17,7 +17,7 @@ const store = (set: SetState<any>, get: GetState<any>) => ({
 
 let useStore: UseBoundStore<StoreApi<Store>>
 
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV === 'development') {
   useStore = create(devtools(store))
 } else {
   useStore = create<Store>(store)