Testing Component Communication with Events in Vue (TypeScript)

Component communication is a cornerstone of Vue applications. Emit testing ensures that components correctly trigger and dispatch custom events, allowing parent components to react appropriately. This challenge focuses on writing unit tests to verify that a Vue component emits the expected events under specific conditions.

Problem Description

You are tasked with creating a unit test for a Vue component called CounterComponent. This component has a button that, when clicked, increments a counter and emits a custom event called counter-incremented with the new counter value. Your goal is to write a test that verifies the component emits this event with the correct payload when the button is clicked.

What needs to be achieved:

• Create a unit test for the CounterComponent.
• Simulate a click event on the component's button.
• Assert that the component emits the counter-incremented event.
• Assert that the payload of the emitted event is the expected incremented counter value.

Key Requirements:

• Use a testing framework like Jest and a Vue testing library like @vue/test-utils.
• The test should be isolated and not rely on external dependencies.
• The test should be readable and maintainable.

Expected Behavior:

When the button is clicked, the component should:

1. Increment its internal counter.
2. Emit the counter-incremented event with the new counter value as the payload.

Edge Cases to Consider:

• Ensure the initial counter value is correctly handled.
• Consider how to mock or stub any dependencies the component might have (though this component is simple, it's good practice to think about).

Examples

Example 1:

Input: CounterComponent is mounted, button is clicked once.
Output: The component emits the 'counter-incremented' event with payload 1.
Explanation: The counter starts at 0, clicking the button increments it to 1, and the event is emitted with the new value.

Example 2:

Input: CounterComponent is mounted, button is clicked twice.
Output: The component emits the 'counter-incremented' event with payload 2 after the second click.
Explanation: Each click increments the counter, and the event is emitted with the updated value after each click.

Constraints

• The component CounterComponent is provided (see below). You are only responsible for writing the unit test.
• Use Jest and @vue/test-utils for testing.
• The test should focus solely on verifying the event emission and payload.
• Performance is not a primary concern for this unit test.

Notes

• Think about how to use @vue/test-utils to mount the component and simulate a click event.
• Use Jest's mocking capabilities to spy on the component's emit method.
• Consider using findByText or similar methods to locate the button within the component.
• The CounterComponent code is provided below for reference.

// CounterComponent.vue
<template>
  <div>
    <button @click="incrementCounter">Increment</button>
    <p>Counter: {{ counter }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'CounterComponent',
  setup() {
    const counter = ref(0);

    const incrementCounter = () => {
      counter.value++;
      this.$emit('counter-incremented', counter.value);
    };

    return {
      counter,
      incrementCounter,
    };
  },
});
</script>