Testing Components with Template Refs

Provide example tests showing how to use template refs when writing unit tests for Vue.js 3 components using a testing framework like Vue Test Utils.

import { ref } from 'vue';
import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

// The component definition
const Component = {
  template: `<button ref="myButton" @click="onClick">Click me!</button>`,
  setup() {
    const isClicked = ref(false);
    const onClick = () => {
      isClicked.value = true;
    };
    return { isClicked, onClick };
  }
};

// Test to check if the button is correctly referenced and can be clicked
describe('MyComponent', () => {
  it('button click should set isClicked to true', async () => {
    const wrapper = mount(Component);
    const button = wrapper.vm.$refs.myButton; // Access the template ref
    await button.trigger('click'); // Simulate button click
    expect(wrapper.vm.isClicked).toBe(true); // Check if the state is updated
  });
});

This code mounts the component using Vue Test Utils, accesses the button via the template ref, simulates a click event on the button, and then checks if the component's internal state is updated accordingly.