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