fix: 完善单测demo；升级单测版本

package.json

@@ -63,7 +63,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/component-compiler-utils": "^3.2.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/test-utils": "^2.2.7",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.0",
     "compression-webpack-plugin": "^8.0.1",

src/Test.vue

@@ -3,12 +3,14 @@
   <span test-id="id">{{obj.id}}</span>
   <span test-id="title">{{obj.title}}</span>
   <button test-id="button" @click="click">click</button>
+  <span test-id="tab">{{lineTab}}</span>
 </template>
 
 <script>
 /* vue-jest的测试示例 */
-import VueRouter from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
+import { ref } from 'vue'
 export default {
   name: 'Test',
   data () {
@@ -35,10 +37,16 @@ export default {
       })
     }
   },
-  created () {
+  setup () {
-    const { currentRoute } = VueRouter.useRouter()
+    const { query } = useRoute()
+    const { currentRoute } = useRouter()
+    const localstorageValue = localStorage.getItem('key')
+    const lineTab = ref(query.lineTab || '')
+    const path = currentRoute.value.path
     return {
-      currentRoute
+      lineTab,
+      path,
+      localstorageValue
     }
   }
 }

src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

@@ -12,7 +12,9 @@
                :key="index"
                @mouseenter="mouseenter(item)"
                @mouseleave="mouseleave(item)"
-               @click="activeChange(item, index)">
+               @click="activeChange(item, index)"
+               :test-id="`tab${index}`"
+          >
             <div class="line-value-mpackets-name">
               <div :class="item.class"></div>
               <div class="mpackets-name">{{$t(item.name)}}</div>

test/Test.test.js

@@ -15,6 +15,9 @@ const mockCount = { data: 999 }
 
 describe('单元测试demo', () => {
   test('Vue组件--点击按钮后count的值+1', async () => {
+    // 若组件中使用了vue-router，需要细化模拟相关内容
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
     // 加载vue组件，获得实例
     const wrapper = mount(Test)
     // 取到文本和按钮的dom
@@ -33,12 +36,39 @@ describe('单元测试demo', () => {
 
     /* 更多断言类型：https://jestjs.io/docs/expect */
   })
+  test('Vue组件--获取路由中的参数', async () => {
+    // query中带上lineTab参数
+    require('vue-router').useRoute.mockReturnValue({ query: { lineTab: 'total' } })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
+    // 加载vue组件，获得实例
+    const wrapper = mount(Test)
+    // 取到文本和按钮的dom
+    const textNode = await wrapper.get('[test-id="tab"]')
+    expect(textNode.text()).toBe('total')
+  })
+  test('Vue组件--模拟获取localstorage/sessionStorage的内容', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
+    // 模拟getItem
+    jest.spyOn(localStorage.__proto__, 'getItem').mockImplementation(key => key)
+    // 加载vue组件，获得实例
+    const wrapper = mount(Test)
+    expect(wrapper.vm.localstorageValue).toBe('key')
+  })
   test('Vue组件--直接获取vue实例中的data和method', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
     // 模拟axios返回数据
     // 测试内容只有一个axios请求的时候
     axios.get.mockResolvedValue(mockCount)
     // 加载vue组件，获得实例
-    const wrapper = mount(Test)
+    const wrapper = mount(Test, {
+      global: {
+        mocks: {
+          $t: key => key
+        }
+      }
+    })
     const textNode = await wrapper.get('[test-id="count"]')
     // 通过wrapper.vm.xxx直接执行click方法、获取data的数据
     expect(wrapper.vm.count).toBe(0)
@@ -50,6 +80,8 @@ describe('单元测试demo', () => {
     })
   })
   test('Vue组件--多个axios请求', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
     // 模拟axios返回数据
     // 测试内容有多个url不同的axios请求的话，需分开写
     axios.get.mockImplementation(url => {
@@ -69,10 +101,10 @@ describe('单元测试demo', () => {
     await wrapper.vm.$nextTick(() => {
       expect(textNode.text()).toBe('2')
       expect(textNode2.text()).toBe('title2')
+      // 匹配整个对象
       expect(wrapper.vm.obj).toEqual({ id: 2, title: 'title2' })
     })
   })
-
   test('js方法--getNameByEventType', async () => {
     expect(getNameByEventType('http error')).toBe('http error ratio')
   })

test/init.js

@@ -1,5 +1,3 @@
-import 'jest-canvas-mock'
-import axios from 'axios'
 import { config } from '@vue/test-utils'
 
 /* 开启测试 */
@@ -19,18 +17,19 @@ window.$dayJs = dayjs
 /* 模拟vue-router库，否则组件中引用vue-router的代码报错 */
 jest.mock('vue-router', () => {
   return {
-    useRouter: function () { return { currentRoute: '/' } },
+    useRouter: jest.fn(),
-    useRoute: function () { return { query: {} } },
+    useRoute: jest.fn(),
     createWebHashHistory: jest.fn(),
     createRouter: jest.fn().mockReturnValue({
       beforeEach: jest.fn()
     })
   }
 })
-
 /* 模拟axios */
 jest.mock('axios')
 /* 模拟$t */
 config.global.mocks.$t = key => key
+/* 模拟$route，具体用例中需要不同值时重写覆盖即可 */
+config.global.mocks.$route = { query: '' }
 /* 消除warn */
 jest.spyOn(console, 'warn').mockImplementation(() => {})

test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js

@@ -8,6 +8,7 @@ const mockGet = {
 
 describe('NetworkOverviewLine.vue测试', () => {
   test('Metric=Bits/s', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
     // 模拟axios返回数据
     axios.get.mockResolvedValue(mockGet)
     // 加载vue组件，获得实例
@@ -31,8 +32,14 @@ describe('NetworkOverviewLine.vue测试', () => {
       expect(textNode2.text()).toEqual('87.56Mbps')
       resolve()
     }, 200))
+
+    // 点击tab后，是否切换高亮状态
+    const textNode3 = await wrapper.get('[test-id="tab2"]')
+    await textNode3.trigger('click')
+    expect(textNode3.classes()).toContain('is-active')
   })
   test('Metric=Packets/s', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
     // 模拟axios返回数据
     axios.get.mockResolvedValue(mockGet)
     // 加载vue组件，获得实例