Vitest + Vue Test Utils + vue3 单元测试 props,store,router,validate,resetFields,$t

import Table from @/tableBlock.vue

import { describe, test, expect, vi } from vitest

import { mount } from @vue/test-utils

import sinon from sinon

// mock store 配置

import { createStore } from vuex

const store = createStore()

// mock router 配置

import { createRouter, createWebHistory } from vue-router

const router = createRouter({

      history: createWebHistory(),

      routes: [{ path: / , component: }]

})

// 页面初始化配置  props,store,router,validate,resetFields,$t

const config = {

      provide: {

            SearchBlock() {

                  return SearchBlock

            }

      },

     props: {

            tableData: [{ checked: true }]

      }

      global: {

            plugins: [[store], [router]],

            stubs: {

                 ep-form : {

                      render: () => {},

                      methods: {

                                 validate: vi.fn().mockResolvedValue({ isValid: true }).mockReturnValueOnce({ isValid: false }),

                                 resetFields: () => true

                        }

                 }

             },

            mocks: {

                

$t: sinon.stub()，

                  state,

                   store: {

                        commit: sinon.stub()

                  }

            }

      }

}

test( table组件 Table  , () => {

      // 接口模拟

      vi.mock( @/api/xx/xx , () => {

          return {

              getList: vi.fn()

                .mockResolvedValue({ returnCode: 0000 , result: { data: []} })

                .mockResolvedValueOnce({ returnCode: 1111 })

        }

   })

    const wrapper = mount(TableBlock, config )

    expect(wrapper.classes()).toContain( table-block )

    expect(wrapper.isVisible()).toBe(true)

    wrapper.unmount()

  })