How to test custom Vue events

LoginForm.test.js

import { shallowMount } from '@vue/test-utils'
import LoginForm from '@/components/LoginForm.vue'
import { BootstrapVue, BModal } from 'bootstrap-vue'
  
describe('LoginForm', () => {
  let wrapper
  
  beforeAll(() => {
    Vue.use(BootstrapVue)
    const container = document.createElement('div')
    document.body.appendChild(container)
    wrapper = shallowMount(LoginForm, { attachTo: container })
  })

  test('focuses on username upon showing', () => {
    const modal = wrapper.findComponent(BModal)
    wrapper.vm.$refs.username = { $el: { focus: jest.fn() } }
    modal.vm.$emit('shown')
    expect(wrapper.vm.$refs.username.$el.focus).toHaveBeenCalled()
  })