I'm currently testing the functionality of a Vue form that utilizes Vuetify components using Jest and Avoriaz.
I have successfully triggered submit.prevent on the form, which resulted in the expected behavior.
However, I encountered an issue when attempting to trigger click on the submit button.
Below is the component structure:
<template>
<v-form
ref="form"
data-cy="form"
@submit.prevent="login"
>
<v-text-field
id="email"
v-model="email"
label="Email"
name="email"
prepend-icon="mdi-at"
type="text"
required
autofocus
data-cy="email-text"
/>
<v-btn
color="primary"
type="submit"
data-cy="login-btn"
>
Login
</v-btn>
</v-form>
</template>
<script>
export default {
data () {
return {
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedacbdddaeedacbddda80cdc1c3">[email protected]</a>',
}
},
computed: {},
methods: {
login: function () {
console.log('Logging in')
}
}
}
</script>
Currently setting up the test environment:
import vuetify from '@/plugins/vuetify'
import { mount } from 'avoriaz'
import Form from '@/views/Form'
describe('Form', () => {
const mountFunction = options => {
return mount(Form, {
vuetify,
...options
})
}
The Vue and Vuetify configuration can be found in @/plugins/vuetify:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
})
This particular test case passes with the mocked setup:
it('can trigger form directly', () => {
const login = jest.fn()
const wrapper = mountFunction()
wrapper.setData({ 'email': 'test@com' })
wrapper.setMethods({ login })
let element = wrapper.first('[data-cy=form]')
element.trigger('submit.prevent')
expect(login).toHaveBeenCalledTimes(1)
})
But when trying to test the submit button, the test fails:
it('can trigger form through button', () => {
const login = jest.fn()
const wrapper = mountFunction()
wrapper.setData({ 'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aadecfd9deeadecfd9de84c9c5c7">[email protected]</a>' })
wrapper.setMethods({ login })
const button = wrapper.first('[type=submit]')
button.trigger('click')
expect(login).toHaveBeenCalledTimes(1)
})
Additional dependencies mentioned in package.json:
{
..
"dependencies": {
"axios": "^0.19.1",
"core-js": "^3.4.4",
"vue": "^2.6.11",
"vue-router": "^3.1.3",
"vuetify": "^2.1.0",
"vuex": "^3.1.2"
},
"devDependencies": {
..
"avoriaz": "^6.3.0",
"vue-jest": "^3.0.5",
"vuetify-loader": "^1.3.0"
}
}
Update:
Testing with non-Vuetify components (<form> and <btn) using test-utils succeeds:
const localVue = createLocalVue()
localVue.use(Vuetify)
describe('Form', () => {
const mountFunction = options => {
return shallowMount(Form, {
localVue,
vuetify,
...options
})
}
it('can trigger form through button alternative', async () => {
const login = jest.fn()
const wrapper = mountFunction({ attachToDocument: true })
try {
wrapper.setData({ 'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="790d1c0a0d390d1c0a0d571a1614">[email protected]</a>' })
wrapper.setMethods({ login })
const button = wrapper.find('[type=submit]')
expect(button).toBeDefined()
button.trigger('click')
await Vue.nextTick()
expect(login).toHaveBeenCalledTimes(1)
} finally {
wrapper.destroy()
}
})
})
Switching back to Vuetify components results in a failed test.