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

对 onMounted Composition API Vue 2 中的函数进行 Jest 测试

1 个答案: