How to config with jest

[rock288]

Version

vue-final-modal: 4.4.6 vue: 3.2.13 @vue/test-utils: 2.4.3

OS

Windows

Reproduction Link

Steps to reproduce

How to config with jest, use @vue/test-utils

What is Expected?

What is actually happening?

Can not config with jest

[hunterliu1003]

@rock288

In the docs of @vue/test-utils, you can use Applying Global Plugins and Mixins.

For vue-final-modal, it might be like:

import { createLocalVue, mount } from '@vue/test-utils'
import { createVfm } from 'vue-final-modal'

// create an extended `Vue` constructor
const localVue = createLocalVue()

// install plugins as normal
const vfm = createVfm()
localVue.use(vfm)

// pass the `localVue` to the mount options
mount(Component, {
  localVue
})

[rock288]

Hi @hunterliu1003 I am using @vue/test-utils: 2.4.3 with vue 3. Docs https://test-utils.vuejs.org/

[hunterliu1003]

@rock288 Maybe like this?

test('global.plugins', () => {
  const vfm = createVfm()
  mount(App, {
    global: {
      plugins: [vfm],
      stubs: { transition: false },
    },
  })
})

[rock288]

Hi @hunterliu1003 I encountered this error TypeError: (0 , vue_final_modal_1.createVfm) is not a function when following the steps above. It seems like there might be an issue with Jest configuration. Could you please help me create a Vue CLI repository and configure Jest to work with the vue-final-modal library?

[vittoriaThinkst]

Hi, did anybody manage to make a test working? Unfortunately I always get only an empty teleport. Not sure what I'm doing wrong

` describe('BaseModal.vue', () => { let wrapper;

beforeEach(() => {
    const vfm = createVfm();
    wrapper = mount(BaseModal, {
        props: { title: 'Test', hasBackButton: true },
        global: { plugins: [vfm], stubs: { teleport: true, FontAwesomeIcon } },
    });
   console.log(wrapper.html());
});

it('to see the modal!', async () => {
    const container = wrapper.find('.vfm__content');
    expect(container.element).toHaveClass('modal');
});`

the console.log for wrapper gives back

`<teleport-stub to="body" disabled="false">

`

My BaseModal component is quite simple

<VueFinalModal> <slot> </slot> </VueFinalModal>

Any idea anybody?

[Skrypt]

Same for me. Trying to find out how I can test this modal component with vitest which is quite similar than jest. When I'm doing this:

stubs: { transition: false },

It fails with an error message:

Error: Your focus-trap must have at least one container with at least one tabbable node in it at all times.

As I can see you guys used Cypress for doing integration tests but there is none unit tests examples in this repository.