Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Using of plugins is impossible #2008

Closed
jimhucksly opened this issue Mar 16, 2023 · 6 comments
Closed

Bug: Using of plugins is impossible #2008

jimhucksly opened this issue Mar 16, 2023 · 6 comments
Labels
bug Something isn't working needs reproduction

Comments

@jimhucksly
Copy link

jimhucksly commented Mar 16, 2023

Describe the bug

To Reproduce
plugin.ts

import { App } from 'vue'

export default {
  install: (vue: App) => {
    const method = () => {
      ...
    }
    vue.config.globalProperties.$method = method
  }
}

component.vue

<template>
  <p>Vue Component</p>
</template>

test.spec.ts

import { mount, VueWrapper } from '@vue/test-utils'
import plugin from './plugin.js'
import component from './component.vue'

let wrapper: VueWrapper<Vue> = null
let component: Vue = null

async function setupTest() {
  wrapper = mount(component, {
    global: {
      plugins: [plugin]
    }
  })
  component = wrapper.vm
}

describe('App', () => {
  beforeEach(async () => {
    await setupTest()
  });

  it('router is ready', async () => {
    expect(component.$method).toBeDefined() // false
  })
})

**Expected behavior**
expect(component.$method).toBeDefined() // true

**Related information:**
  System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i5-10600 CPU @ 3.30GHz
    Memory: 8.21 GB / 15.62 GB
  npmPackages:
    @vue/test-utils: ^2.3.1 => 2.3.1
    jest: ^26.6.3 => 26.6.3
    vue: ^3.2.20 => 3.2.20>
@jimhucksly jimhucksly added the bug Something isn't working label Mar 16, 2023
@freakzlike
Copy link
Collaborator

Hello @jimhucksly,

You are reassigning the variable component which is already set by the import statement. Can you try to use expect(wrapper.vm.$method).toBeDefined() instead and check if it's working?

@jimhucksly
Copy link
Author

sorry, but the meaning of this does not change. i attach the correctly version of test.spec.ts

import { mount, VueWrapper } from '@vue/test-utils'
import plugin from './plugin.js'
import component from './component.vue'

let wrapper: VueWrapper<Vue> = null
let vm: Vue = null

async function setupTest() {
  wrapper = mount(component, {
    global: {
      plugins: [plugin]
    }
  })
  vm = wrapper.vm
}

describe('App', () => {
  beforeEach(async () => {
    await setupTest()
  });

  it('router is ready', async () => {
    expect(vm.$method).toBeDefined() // false
  })
})

@freakzlike
Copy link
Collaborator

Can you try to upgrade vue to the latest version?

It's working in the stackblitz example with the latest version: https://stackblitz.com/edit/vitest-dev-vitest-ynqmhz?file=test%2Fbasic.test.ts

@cexbrayat
Copy link
Member

@jimhucksly This shouldn't really matter. Try to update Vue and Jest, as you're using quite old versions. If that's not enough, you can try to create a small repro in a Github repo and we'll take a closer look

@jimhucksly
Copy link
Author

@cexbrayat Thank you, i have solved this problem.

@matthew-white
Copy link

@jimhucksly, I'm curious about how you solved the problem. After upgrading Vue and Vue Test Utils to the latest, properties set on config.globalProperties aren't accessible from the vm property of the VTU wrapper for me. It could be other issues with my setup (I'm still using Vue CLI, and I'm not using Jest), but it'd be very useful to hear what ended up working for you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs reproduction
Projects
None yet
Development

No branches or pull requests

4 participants