0

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.