add: unit test infra

.eslintrc.js

@@ -19,13 +19,13 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
   },
+  overrides: [
+    {
+      files: ['*.test.ts'],
+      rules: {
+        '@typescript-eslint/no-empty-function': 'off',
+      },
+    },
+  ],
   ignorePatterns: ['dist'],
-  //   overrides: [
-  //     {
-  //       files: ['*.test.ts'],
-  //       rules: {
-  //         '@typescript-eslint/no-empty-function': 'off',
-  //       },
-  //     },
-  //   ],
 }

package.json

@@ -22,7 +22,7 @@
     "prettier-check": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
     "format": "yarn run lint --write",
     "test:types": "tsc --build tsconfig.json",
-    "test:unit": "jest",
+    "test:unit": "vitest --environment jsdom",
     "test": "yarn run test:types && yarn run test:unit",
     "dev:docs": "vitepress dev docs",
     "build:docs": "vitepress build docs",
@@ -53,14 +53,14 @@
     "@typescript-eslint/parser": "^5.45.1",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "^3.2.36",
-    "@vue/test-utils": "^2.0.0",
+    "@vue/test-utils": "^2.2.6",
     "@vuedx/typecheck": "^0.7.5",
     "@vuedx/typescript-plugin-vue": "^0.7.5",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.1",
-    "jest": "^28.1.0",
+    "jsdom": "^20.0.3",
     "lint-staged": "^12.4.2",
     "node-stdlib-browser": "^1.2.0",
     "pascalcase": "^2.0.0",
@@ -79,6 +79,7 @@
     "vite": "^3.2.4",
     "vite-plugin-windicss": "^1.8.4",
     "vitepress": "^1.0.0-alpha.29",
+    "vitest": "^0.25.5",
     "vue": "^3.2.45",
     "windicss": "^3.5.4"
   },

tests/unit/components/Board.test.ts

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils'
+import Board from '@/components/Board.vue'
+import Modal from '@/components/Modal.vue'
+import Loader from '@/components/Loader.vue'
+import { MetaMaskConnector, Connector } from '@/connectors'
+const connectors: Connector[] = [new MetaMaskConnector()]
+
+describe('Board component', () => {
+  beforeEach(() => {
+    // create teleport target
+    const el = document.createElement('div')
+    el.id = 'modal'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    // clean up
+    document.body.outerHTML = ''
+  })
+  it('should work with import on demand', () => {
+    // mount(Loader)
+    // mount(Modal, {
+    //   propsData: {
+    //     modalOpen: true,
+    //   },
+    // })
+    const wrapper = mount(Board, {
+      attachTo: document.body,
+      propsData: {
+        connectors: connectors,
+      },
+      global: {
+        stubs: {
+          teleport: true,
+        },
+      },
+      //   provide: {
+      //     autoConnect() {
+      //       return false
+      //     },
+      //   },
+    })
+    // console.warn(wrapper.getComponent(Board).html())
+    expect(wrapper.getComponent(Board).html()).toContain('MetaMask')
+  })
+})

tests/unit/composables/useWallet.test.ts

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick, ref } from 'vue'
+import { useWallet } from '@/composables'
+
+// wip: refer to https://github.com/Mini-ghost/vorms/blob/main/packages/core/tests/composiable/useForm.test.ts
+
+const noop = () => {}
+
+const setup = (setup: () => unknown) => {
+  const Comp = defineComponent({
+    setup,
+    template: `<div />`,
+  })
+
+  return mount(Comp)
+}
+
+const sleep = (ms?: number) => {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+describe('useWallet', () => {
+  it('when initialize wallet state', () => {
+    setup(() => {
+      const { wallet } = useWallet()
+      expect(wallet.connector).toEqual(null)
+      expect(wallet.error).toEqual('')
+      expect(wallet.provider).toEqual(null)
+      expect(wallet.status).toEqual('none')
+    })
+  })
+})

tests/unit/utils/check.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { checkChainId } from '@/utils'
+
+describe('checkChainId', () => {
+  it('should return true when chain id is in the available network', () => {
+    expect(checkChainId(1)).toBeTruthy()
+    expect(checkChainId(5)).toBeTruthy()
+  })
+  it('should return false when chain id is not in the available network', () => {
+    expect(checkChainId(2)).toBeFalsy()
+    expect(checkChainId(4)).toBeFalsy()
+  })
+})

tsconfig.json

@@ -43,7 +43,8 @@
     ],
     "paths": {
       "vue-dapp": ["./src/index.ts"],
-      "vue-dapp/*": ["./src/*"]
+      "vue-dapp/*": ["./src/*"],
+      "@/*": ["./src/*"]
     }
   }
 }

vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vitest/config'
+import path from 'path'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  define: {
+    __DEV__: true,
+  },
+  test: {
+    globals: true, // no need to import test api like `import { describe, expect, it } from 'vitest'`
+    environment: 'jsdom',
+    include: ['tests/**/*.test.ts'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})