vue test utils emitted

1. Import the necessary modules: import { shallowMount } from '@vue/test-utils';

2. Mount the Vue component you want to test: const wrapper = shallowMount(Component);

3. Trigger an event or action on the component: wrapper.trigger('click');

4. Check if the component emitted the expected event: expect(wrapper.emitted().eventName).toBeTruthy();

5. Get the payload of the emitted event: const payload = wrapper.emitted().eventName[0][0];

In this example, eventName is the name of the event emitted by the component.

1. Assert the expected payload values: expect(payload).toEqual(expectedPayload);

Here, expectedPayload is the value you expect the emitted event payload to have.

1. Optionally, you can also test for the number of times an event was emitted: expect(wrapper.emitted().eventName.length).toBe(3);

This example asserts that the event named eventName was emitted 3 times.

1. Clean up after the test: wrapper.destroy();

This step ensures that the mounted component is properly cleaned up after the test is completed.

These steps outline the process of using Vue Test Utils to test the emitted events of a Vue component. By following these steps, you can verify if the component is emitting the expected events with the correct payload values.