Register global custom directives for cypress component testing in vue

Question

Is there a way to register global custom directives for cypress component testing in vue.js. Just register

app.directive('some',(el,binding)=>{{...})

The problem cannot be solved in the

main.js file. Because the directive could not be parsed in the component test component.

Local register like this:

mount(SomeComp,{
directive:{
  'some': {...}
})

is not a good choice. Because I'm using this directive in every component and it needs to be registered locally in every component.

How do I register global directives for Cypress component testing?

Thanks

Answer 1

Create your own mount,

import { mount } from '@cypress/vue'

export const mountWithDirective = (myComponent) => {

  return mount(myComponent, {
    directive:{
      'some': {...}
  })
}

Put this into /cypress/support/index.js or another file of your choice.

// test
import { mountWithDirective } from 'cypress/support'
import Component from './Component.vue'

it...
  mountWithDirective(Component)