对 onMounted Composition API Vue 2 中的函数的开玩笑测试

Question

谁能告诉我如何为onMounted钩子中的函数编写测试用例？我正在使用带有组合 API 插件的 vue 2。

    const getUsers = async () => {
            const usersQuery = `
                query {
                  users: {
                     id
                     username
                   }
                }
            `
            try {
                const result = await apolloClient.getGraphqlData(usersQuery)
                if (result) users.value = result.data.users
            } catch (err) {
                console.log('Error while receiving users', err)
            }
        }

下面是我的onMounted钩子

onMounted(() => {
    getUsers()
})

Answer 1

您不能模拟在setup() 中定义的本地函数。必须公开这些功能，以便单元测试可以访问它们。一种解决方法是在与组件相邻的外部文件中声明方法：

// mylib.js
export const getUsers = async () => { /*...*/ }

然后将该文件导入您的组件中：

import { onMounted } from '@vue/composition-api'
import { getUsers } from './mylib'

export default {
  setup() {
    onMounted(() => getUsers())
  }
}

然后在您的测试文件中，导入相同的文件，并使用jest.mock() 对其进行自动模拟，这样您就可以验证该函数是否在组件挂载时被调用：

import { getUsers } from '@/components/mylib'
import MyComponent from '@/components/MyComponent.vue'

jest.mock('@/components/setupFns')

describe('MyComponent', () => {
  beforeEach(() => jest.resetAllMocks())

  it('calls getUsers() on mount', () => {
    shallowMount(MyComponent)
    expect(getUsers).toHaveBeenCalledTimes(1)
  })
})

demo