Testing Vue 3 Components - LoginForm.spec.js

LoginForm.spec.js

import { mount } from '@vue/test-utils'
import LoginForm from './LoginForm.vue'

describe('LoginForm', () => {
  it('does not submit empty form', () => {
    const wrapper = mount(LoginForm)
    const form = wrapper.find('form')
    form.trigger('submit')
    expect(wrapper.emitted('submit')).toBeUndefined()
  })

  it('submits form when data is filled', () => {
    const wrapper = mount(LoginForm)
    const FORM_DATA = {
      username: 'yoda',
      password: '4force',
    }
    wrapper.setData({
      formData: FORM_DATA,
    })
    const form = wrapper.find('form')
    form.trigger('submit')
    expect(wrapper.emitted('submit')).toBeDefined()
    expect(wrapper.emitted('submit')[0][0]).toMatchObject(FORM_DATA)
  })
})