test(taro-h5): jest to vitest

packages/taro-api/package.json

@@ -8,6 +8,12 @@
   "main:h5": "dist/index.esm.js",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
   "directories": {
     "lib": "lib",
     "test": "__tests__"

packages/taro-h5/__mocks__/setEnv.ts

@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom/vitest'
+
 process.env.NODE_ENV = 'production'
 process.env.TARO_ENV = 'h5'
 process.env.TARO_PLATFORM = 'web'

packages/taro-h5/__tests__/base/index.test.ts

@@ -1,4 +1,6 @@
-import * as Taro from '@tarojs/taro-h5'
+import { describe, expect, test } from 'vitest'
+
+import * as Taro from '../../src/index'
 
 describe('others', () => {
   test('should covert arraybuffer to base64', () => {

packages/taro-h5/__tests__/base/network.test.ts

@@ -1,9 +1,11 @@
-import * as Taro from '@tarojs/taro-h5'
+import { describe, expect, test, vi } from 'vitest'
+
+import * as Taro from '../../src/index'
 
 describe('networkType', () => {
   test('should getNetworkType return Promise that resolve networkType', () => {
-    const success = jest.fn()
-    const complete = jest.fn()
+    const success = vi.fn()
+    const complete = vi.fn()
 
     // @ts-ignore
     navigator.connection = {
@@ -53,22 +55,24 @@ describe('networkType', () => {
       })
   })
 
-  test('should get networkType from connection.type that does not follow the spec', done => {
-    const cbList: any = {}
-    // @ts-ignore
-    navigator.connection = {
-      effectiveType: '4g',
-      addEventListener: jest.fn((ev, cb) => {
-        cbList[ev] = cb
-      })
-    }
+  test('should trigger onNetworkStatusChange when connection changes', () => {
+    return new Promise<void>(resolve => {
+      const cbList: any = {}
+      // @ts-ignore
+      navigator.connection = {
+        effectiveType: '4g',
+        addEventListener: vi.fn((ev, cb) => {
+          cbList[ev] = cb
+        })
+      }
 
-    setTimeout(() => cbList.change(), 1000)
+      setTimeout(() => cbList.change(), 1000)
 
-    Taro.onNetworkStatusChange(ev => {
-      expect(ev.isConnected).toBe(true)
-      expect(ev.networkType).toBe('4g')
-      done()
+      Taro.onNetworkStatusChange(ev => {
+        expect(ev.isConnected).toBe(true)
+        expect(ev.networkType).toBe('4g')
+        resolve()
+      })
     })
   })
 })

packages/taro-h5/__tests__/base/pxTransform.test.ts

@@ -1,6 +1,8 @@
-import * as Taro from '@tarojs/taro-h5'
+import { describe, expect, test } from 'vitest'
 
-describe('pxtransform', () => {
+import * as Taro from '../../src/index'
+
+describe('pxTransform', () => {
   test('pxTransform', () => {
     Taro.initPxTransform({
       designWidth: 750,

packages/taro-h5/__tests__/base/system.test.ts

@@ -1,4 +1,6 @@
-import * as Taro from '@tarojs/taro-h5'
+import { describe, expect, test, vi } from 'vitest'
+
+import * as Taro from '../../src/index'
 
 describe('systemInfo', () => {
   test('should getSystemInfoSync return system information', () => {
@@ -20,8 +22,8 @@ describe('systemInfo', () => {
   })
 
   test('should getSystemInfo return Promise that resolve system information', () => {
-    const success = jest.fn()
-    const complete = jest.fn()
+    const success = vi.fn()
+    const complete = vi.fn()
 
     expect.assertions(3)
     const info = Taro.getSystemInfoSync()

packages/taro-h5/__tests__/location/index.test.ts

@@ -1,13 +1,15 @@
-import * as Taro from '@tarojs/taro-h5'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 
-const mockConsole = require('jest-mock-console')
+import * as Taro from '../../src/index'
 
 describe('location', () => {
   beforeEach(() => {
-    mockConsole()
+    vi.spyOn(console, 'log').mockImplementation(() => {})
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+    vi.spyOn(console, 'error').mockImplementation(() => {})
     // @ts-ignore
     navigator.geolocation = {
-      getCurrentPosition: jest.fn((callback) => {
+      getCurrentPosition: vi.fn((callback) => {
         callback({
           coords: {
             accuracy: 2,
@@ -22,6 +24,10 @@ describe('location', () => {
     }
   })
 
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
   test('should catch unsupported error', () => {
     expect.assertions(1)
     return Taro.getLocation({
@@ -48,7 +54,7 @@ describe('location', () => {
   test('should get location info object from wx', () => {
     // @ts-ignore
     window.wx = {
-      getLocation: jest.fn((options) => {
+      getLocation: vi.fn((options) => {
         options.complete?.(mockLocation)
         options.success?.(mockLocation)
       })
@@ -81,9 +87,9 @@ describe('location', () => {
   test('should return Promise that reject does not support browser feature', () => {
     // @ts-ignore
     delete navigator.geolocation
-    const success = jest.fn()
-    const fail = jest.fn()
-    const complete = jest.fn()
+    const success = vi.fn()
+    const fail = vi.fn()
+    const complete = vi.fn()
 
     expect.assertions(5)
     return Taro.getLocation({

packages/taro-h5/__tests__/network/request.test.ts

@@ -1,21 +1,36 @@
-import * as Taro from '@tarojs/taro-h5'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 
-const fetch = require('jest-fetch-mock')
+import * as Taro from '../../src/index'
 
-// @ts-ignore
+const fetch = vi.fn()
 global.fetch = fetch
 
+function mockFetchOnce (body: string, init?: { status?: number, statusText?: string }) {
+  fetch.mockResolvedValueOnce({
+    ok: (init?.status || 200) >= 200 && (init?.status || 200) < 300,
+    status: init?.status || 200,
+    statusText: init?.statusText || 'OK',
+    json: () => Promise.resolve(JSON.parse(body)),
+    text: () => Promise.resolve(body),
+    headers: new Map()
+  })
+}
+
+function mockFetchReject (error: Error) {
+  fetch.mockRejectedValueOnce(error)
+}
+
 describe('request', () => {
   beforeEach(() => {
-    fetch.resetMocks()
+    fetch.mockReset()
   })
 
   test('should return fetch data', () => {
-    const success = jest.fn()
-    const fail = jest.fn()
-    const complete = jest.fn()
+    const success = vi.fn()
+    const fail = vi.fn()
+    const complete = vi.fn()
 
-    fetch.once(JSON.stringify({ data: '12345' }))
+    mockFetchOnce(JSON.stringify({ data: '12345' }))
 
     expect.assertions(6)
     return Taro.request({
@@ -42,7 +57,7 @@ describe('request', () => {
   })
 
   test('should return fetch data when options is url string', () => {
-    fetch.once(JSON.stringify({ data: '12345' }))
+    mockFetchOnce(JSON.stringify({ data: '12345' }))
 
     return Taro.request('https://github.com')
       .then(res => {
@@ -55,7 +70,7 @@ describe('request', () => {
   })
 
   test('should set correct params', () => {
-    fetch.once(JSON.stringify({ data: '12345' }), { status: 201 })
+    mockFetchOnce(JSON.stringify({ data: '12345' }), { status: 201 })
 
     expect.assertions(4)
     return Taro.request({
@@ -93,11 +108,11 @@ describe('request', () => {
   })
 
   test('should catch error', () => {
-    const success = jest.fn()
-    const fail = jest.fn()
-    const complete = jest.fn()
+    const success = vi.fn()
+    const fail = vi.fn()
+    const complete = vi.fn()
 
-    fetch.mockReject(new Error('fake error message'))
+    mockFetchReject(new Error('fake error message'))
 
     expect.assertions(5)
     return Taro.request({
@@ -116,12 +131,11 @@ describe('request', () => {
   })
 
   test('should no error by status 400', () => {
-    const success = jest.fn()
-    const fail = jest.fn()
-    const complete = jest.fn()
+    const success = vi.fn()
+    const fail = vi.fn()
+    const complete = vi.fn()
 
-    fetch.mockResponse(null, {
-      counter: 1,
+    mockFetchOnce('null', {
       status: 400,
       statusText: 'missing parameter',
     })
@@ -143,12 +157,30 @@ describe('request', () => {
   })
 
   test('should abort request when it timeout', () => {
-    const success = jest.fn()
-    const fail = jest.fn()
-    const complete = jest.fn()
-
-    fetch.once(() => new Promise((resolve) => {
-      setTimeout(resolve, 3000, JSON.stringify({ body: 'ok' }))
+    const success = vi.fn()
+    const fail = vi.fn()
+    const complete = vi.fn()
+
+    fetch.mockImplementationOnce((url, options) => new Promise((resolve, reject) => {
+      const signal = options?.signal
+      if (signal) {
+        if (signal.aborted) {
+          reject(new DOMException('The operation was aborted.', 'AbortError'))
+          return
+        }
+        signal.addEventListener('abort', () => {
+          reject(new DOMException('The operation was aborted.', 'AbortError'))
+        })
+      }
+      setTimeout(() => {
+        resolve({
+          ok: true,
+          status: 200,
+          json: () => Promise.resolve({ body: 'ok' }),
+          text: () => Promise.resolve(JSON.stringify({ body: 'ok' })),
+          headers: new Map()
+        })
+      }, 3000)
     }))
 
     expect.assertions(6)
@@ -161,7 +193,7 @@ describe('request', () => {
     })
       .catch(err => {
         expect(err.code).toBe(20)
-        expect(err.message).toBe('The operation was aborted. ')
+        expect(err.message).toBe('The operation was aborted.')
         expect(err.name).toBe('AbortError')
         expect(success.mock.calls.length).toBe(0)
         expect(fail.mock.calls.length).toBe(1)