时间戳

首页 > 解决方案 > 如何模拟 ApolloMutation 组件？

testing - 如何模拟 ApolloMutation 组件？

问题描述

除测试外，该应用程序的所有内容都运行良好。

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

我在VueApollo测试中看到了几个解决方案。我试过这个。就我而言，我正在使用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 trigger() on empty Wrapper

标签： testinggraphqljestjsnuxt.jsvue-apollo

解决方案

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

替换一切都应该没问题。

推荐阅读