Tinydev
Tinydev

Reputation: 1

Vue 3 vitest useMouse composable test not working

I've reused the mouse tracker composable here: https://vuejs.org/guide/reusability/composables, adding a twist by binding the event to an element in order to track the mouse position relative to it. It works a treat on the components calling it, but I'm struggling with testing.

mouse.js:

import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse(element) { //<- element is a ref passed from the calling component, thus the .value
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => element.value.addEventListener('mousemove', update))
  onUnmounted(() => element.value.removeEventListener('mousemove', update))

  return { x, y }
}

mouse.test.js:

import { useMouse } from "@/composables/mouse";
import { beforeEach, describe, expect, it } from "vitest";
import { ref } from "vue";

describe('useMouse Composable', () => {
    let element;

    beforeEach(() => {
        element = ref(document.createElement('div'));
    });

    it('should initialize x and y as 0', () => {
        const { x, y } = useMouse(element);
        expect(x.value).toBe(0);
        expect(y.value).toBe(0);
    });

    it('should update x and y on mousemove event', async () => {
        const { x, y } = useMouse(element);

        const event = new MouseEvent('mousemove', { screenX: 50, screenY: 100 });
        element.value.dispatchEvent(event);
    
        expect(x.value).toBe(50);
        expect(y.value).toBe(100);
    });
});

"should initialize x and y as 0" is fine but the next one expects x and y to be 0. I'm finding it hard to get a starting point to debug this mess, so if someone has some tips in testing I'm all ears. (I've got jsdom environment set btw)

I ran this with npm run test (vitest) using visual studio code. Some AI mentionned that the mouse event may fire before the onMounted, so the events wouldn't catch the movement. I then tried the "mount" of @vue/test-utils but same result.

Upvotes: 0

Views: 77

Answers (0)

Related Questions