Is there a way to simulate a call to a method triggered by a Vue directive?

Question

Is there a way to simulate a call to a method triggered by a Vue directive?

I am having an issue with the close() method in my Test component. It seems to only work when clicking outside of the div that the directive is applied to. How can I ensure that the method is triggered appropriately in my test? The component utilizes the v-click-outside npm package.

Component

<script>
  import vClickOutside from 'v-click-outside';

  export default {
    name: 'Test',

    directives: {
      vClickOutside,
    },

    data: () => ({
      isOpen: false,
    }),
    methods: {
      close() {
        this.isOpen = false;
      },
  };
</script>

<template>
  <div
    v-click-outside="close"
    class="test-class"
  >
    <OtherComponent />
  </div>
</template>

Test File

const clickOutsidelDirective = jest.fn();

describe('Test.vue', () => {
  const wrapper = shallowMount(Component, {
   directives: {
      clickOutside: clickOutsidelDirective,
    },
  });
   // Not sure how to mock the close() function 
   wrapper.find('.test-class').trigger('click');
   
   // This assertion does not pass as expected
   expect(clickOutsidelDirective).toHaveBeenCalled();
}

javascript vue.js vuejs2 jestjs vue-test-utils

Answer 1

Answer №1

The directive in your component is not properly configured:

import vClickOutside from 'v-click-outside'

export default {
  directives: {
    // BEFORE: ❌ 
    vClickOutside,

    // AFTER: ✅
    clickOutside: vClickOutside.directive
  },
}

To confirm that the close() function is invoked when clicking outside the component:

Mock the close method using jest.spyOn.
Create a div element for the test component, and attach the mounted wrapper to it.
v-click-directive adds its event listeners on the next macro-tick (using setTimeout with no timeout), so the test also needs to wait a macro-tick for the directive to initialize.
Simulate a click event on the wrapper, and await the result. Then, verify that close() was called.

The test should be structured like this:

it('click directive', async () => {
  1️⃣
  const closeFn = jest.spyOn(HelloWorld.methods, 'close')

  2️⃣ 
  const div = document.createElement('div')
  document.body.appendChild(div)

  const wrapper = mount({
    template: `<div><HelloWorld /></div>`,
    components: {
      HelloWorld
    },
  }, { attachTo: div })

  try {
    3️⃣
    await new Promise(r => setTimeout(r))

    4️⃣
    await wrapper.trigger('click')
    expect(closeFn).toHaveBeenCalled() ✅

  } finally {
    wrapper.destroy()
  }
})

Answer 2

The directive in your component is not properly configured:

import vClickOutside from 'v-click-outside'

export default {
  directives: {
    // BEFORE: ❌ 
    vClickOutside,

    // AFTER: ✅
    clickOutside: vClickOutside.directive
  },
}

To confirm that the close() function is invoked when clicking outside the component:

Mock the close method using jest.spyOn.
Create a div element for the test component, and attach the mounted wrapper to it.
v-click-directive adds its event listeners on the next macro-tick (using setTimeout with no timeout), so the test also needs to wait a macro-tick for the directive to initialize.
Simulate a click event on the wrapper, and await the result. Then, verify that close() was called.

The test should be structured like this:

it('click directive', async () => {
  1️⃣
  const closeFn = jest.spyOn(HelloWorld.methods, 'close')

  2️⃣ 
  const div = document.createElement('div')
  document.body.appendChild(div)

  const wrapper = mount({
    template: `<div><HelloWorld /></div>`,
    components: {
      HelloWorld
    },
  }, { attachTo: div })

  try {
    3️⃣
    await new Promise(r => setTimeout(r))

    4️⃣
    await wrapper.trigger('click')
    expect(closeFn).toHaveBeenCalled() ✅

  } finally {
    wrapper.destroy()
  }
})

Answer 3

Answer №2

Within your primary component, the directive was explicitly imported. Therefore, there is no need to redefine it in your test.

It is essential to test the consequences of using v-click-outside. Specifically, ensure that the close method triggers correctly rather than mocking the entire directive. Consider the following approach:

UPDATE: Your implementation of the directive is incorrect:

<template>
  <div>
    <div
        v-click-outside="close"
        class="test-class"
    >
      <h1>H1</h1>
    </div>
    <div>
      <h1 class="outside-class">Outside</h1>
    </div>
  </div>
</template>
<script>
import clickOutside from 'v-click-outside';

export default {
  name: 'Test',

  directives: {
    clickOutside: clickOutside.directive,
  },

  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    close() {
      this.isOpen = true;
    },
  }
}
</script>

In the latest version of Vue-test-utils, method overriding will be deprecated. A revised method should function like so:

const wrapper = shallowMount(HelloWorld)
wrapper.find('.test-class').trigger('click')
expect(wrapper.vm.isOpen).toBeTruthy()
wrapper.find('.outside-class').trigger('click')
expect(wrapper.vm.isOpen).toBeFalsy()

However, unexpected behavior may occur due to the internal implementation of v-click-outside. It seems there might be an issue with the directive and shallowMount compatibility.

Answer 4

Within your primary component, the directive was explicitly imported. Therefore, there is no need to redefine it in your test.

It is essential to test the consequences of using v-click-outside. Specifically, ensure that the close method triggers correctly rather than mocking the entire directive. Consider the following approach:

UPDATE: Your implementation of the directive is incorrect:

<template>
  <div>
    <div
        v-click-outside="close"
        class="test-class"
    >
      <h1>H1</h1>
    </div>
    <div>
      <h1 class="outside-class">Outside</h1>
    </div>
  </div>
</template>
<script>
import clickOutside from 'v-click-outside';

export default {
  name: 'Test',

  directives: {
    clickOutside: clickOutside.directive,
  },

  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    close() {
      this.isOpen = true;
    },
  }
}
</script>

In the latest version of Vue-test-utils, method overriding will be deprecated. A revised method should function like so:

const wrapper = shallowMount(HelloWorld)
wrapper.find('.test-class').trigger('click')
expect(wrapper.vm.isOpen).toBeTruthy()
wrapper.find('.outside-class').trigger('click')
expect(wrapper.vm.isOpen).toBeFalsy()

However, unexpected behavior may occur due to the internal implementation of v-click-outside. It seems there might be an issue with the directive and shallowMount compatibility.

Is there a way to simulate a call to a method triggered by a Vue directive?

Answer №1

Answer №2

Similar questions

Utilizing various AngularJS filters with multiple input sources

Troubleshooting ASP.NET MVC5: Partial view not loading dynamic JavaScript reference

"Resolving the issue of Django request.FILE returning a null value

Retrieve the origin of the copied text

How can we utilize Javascript to add both days and years to the current date?

locate the following div using an accordion view

Changing the text color of the Vuetify Table header is a simple way to customize the

Conflict arising from duplicated directive names in AngularJS

Transform JSON data into a Google Sheet using Google Apps Script

What techniques can I use to adjust the size of an image through zooming in and out?

Incorporating database coordinates into Marker React Leaflet: A Step-by-Step Guide

Angular's lazy evaluation technique for single-shot binding on expressions

Having trouble incorporating choreographer-js, an external JavaScript library, into my Nuxt project as it is not functioning correctly

SyntaxError: The token + was not anticipated

Paragraph Separated by Bullets Without Bullets At End of Line

applying various conditions to JavaScript arrays for filtering

Preventing scrolling in one div while focusing on another div

Having trouble getting the Bootstrap 5 Modal to function properly within an Electron app

Clicking on "li" to activate and deactivate

Error encountered in Node.js: Attempting to modify headers after they have already been sent to the client