vendredi 30 août 2019

How do I mock ApolloMutation component?

Everything about the app works fine except the testing.

I have tried to use mount and shallowMount methods exposed by @vue/test-utils to mock the ApolloMutation component.

I have seen couple of solutions on VueApollo testing. I have tried this. In my case, I'm using NuxtApollo community module. I tried to apply it the same way, but throwing error about the wrapper been empty, not sure if importing the @nuxtjs/apollo is the right thing to do.

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)
  });
});

The component I want to test.

<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: </p>
      <p v-if="loading">loading...</p>
    </template>
  </ApolloMutation>
</template>

I expected the output to be 4 but I got the error: [vue-test-utils]: find did not return .callMe, cannot call trigger() on empty Wrapper

Aucun commentaire:

Enregistrer un commentaire