Recently delved into the world of Vue.js and Jest to see how they interact. I watched some tutorials and then decided to give it a go myself, but ran into trouble with getting the trigger click to work.
Within my component, I have a login button, which is the only v-btn element present.
<v-card-actions>
<v-btn
block
:disabled="!valid"
color="info"
class="mr-4"
@click.native="on_login"
>
Login
</v-btn>
</v-card-actions>
In my login.spec.js file:
import { mount, shallowMount } from '@vue/test-utils';
import Login from "@/views/Login";
import { createLocalVue } from '@vue/test-utils'
import Vuetify from "vuetify";
const localVue = createLocalVue()
localVue.use(Vuetify);
describe('Login.vue', () => {
it('should contain "login"', () => {
const wrapper = mount(Login);
expect(wrapper.html()).toContain('login');
});
it('should trigger login event', async () => {
const wrapper = mount(Login, {
localVue
});
const spy_on_login = jest.spyOn(wrapper.vm, 'on_login');
const button = wrapper.find('.v-btn');
expect(button.exists()).toBeTruthy();
await button.trigger('click');
expect(spy_on_login).toHaveBeenCalled();
});
});
I initially omitted the usage of localVue and Vuetify because Vuetify is already included in the test/unit/setup.js file.
Being a novice in this area, I'm unsure where to begin debugging the issue with the trigger not functioning, despite the button being present.
Any suggestions or advice are greatly appreciated, as I've tried various solutions found on Stack Overflow to no avail :(