testing - 我如何模拟 ApolloMutation 组件？

Question

除了测试之外，关于应用程序的一切都运行良好。

我尝试使用 @vue/test-utils 公开的 mount 和 shallowMount 方法来模拟 ApolloMutation组件。

我见过几个关于 VueApollo 测试的解决方案。我试过this .就我而言，我使用的是 NuxtApollo 社区模块。我尝试以相同的方式应用它，但抛出关于包装器的错误是空的，不确定导入 @nuxtjs/apollo 是否正确。

import { createLocalVue, shallowMount } from '@vue/test-utils'
import VueApollo from '@nuxtjs/apollo'
import Register from '../pages/register/index.vue'

describe('Register user', () => {

  let localVue
  beforeEach(() => {
    localVue = createLocalVue()
    localVue.use(VueApollo, {})
  })

  it('Should click the register button to register', () => {

    const mutate = jest.fn()
    const wrapper = shallowMount(Register, {
      localVue,
      mocks: {
        $apollo: {
          mutate,
        }
      }
    });

    wrapper.find('.callMe').trigger('click')
    expect(2+2).toBe(4)
  });
});

我要测试的组件。

<template>
  <ApolloMutation
      :mutation="require('../../apollo/mutations/createUser.gql')"
      :variables="{firstName, lastName, username, phone, email, password}"
      @done="onDone">
    <template v-slot="{ mutate, loading, error }">
      <input v-model="firstName" placeholder="first name">
      <input v-model="lastName" placeholder="last name">
      <input v-model="username" placeholder="username">
      <input v-model="phone" placeholder="phone">
      <input v-model="email" placeholder="email">
      <input v-model="password" placeholder="password">
      <button :disabled="loading" @click="mutate">CreateUser</button>
      <button class="callMe" @click="callMe">CreateUser</button>
      <p v-if="error">An error occurred: {{ error }}</p>
      <p v-if="loading">loading...</p>
    </template>
  </ApolloMutation>
</template>

我预计输出为 4 但我收到错误:[vue-test-utils]: find did not return .callMe, cannot call tr​​igger() on empty Wrapper

Answer 1

应该是 import VueApollo from 'vue-apollo' 而不是 import VueApollo from '@nuxtjs/apollo'。

替换成一切都应该没问题。