Error message: Prototype method is not a function

[khukhunaishvili]

I have a Vue cli project and for testing using Vue testing library & Jest dom.

Iv a method on Vue prototype which works fine in component.

While trying to test that component, i get this message - "TypeError: this.$getRouteQuery is not a function"

How can i fix it?

[afontcu]

Hi! Can you share an example of the component and the test, and some information about the Vue Testing Lib version?

If $getRouteQuery is a custom method provided by a plugin or similar you might need to install that plugin when rendering the component, too.

[khukhunaishvili]

@afontcu

package.json

"@testing-library/jest-dom": "^5.11.9",
"@testing-library/vue": "^5.6.1",

component:

<template>
  <div>
    <h1 v-if="isMainFaq">Main Faq</h1>
  </div>
</template>
<script>
export default {
  computed: {
    isMainFaq() {
      return this.$getRouteQuery().length == 1
    },
  },
}
</script>

faq.specs.js

import { render, screen } from '@testing-library/vue'
import '@testing-library/jest-dom'
import faq from '../../src/components/TC/layout/faq/index.vue'

const routes = [
  {path: '/faq', component: faq},
]

it('Faq component', async () => {
  render(faq, {routes});
  expect(screen.queryByText('Text')).not.toBeInTheDocument()
  expect(screen.getByText('faq')).toBeInTheDocument()
})

I have also tried to registering my method ( which is defined in my_plugin.js ) as i did it in main.js, but it gives me bunch of different errors.

import MyPlugin from '../../src/my_plugin'
Vue.use(MyPlugin)

[afontcu]

Not sure where $getRouteQuery comes from, but assuming "MyPlugin" provides it…:

import MyPlugin from '../../src/my_plugin'

it('Faq component', async () => {
  render(faq, {routes}, vue => { vue.use(MyPlugin) });  // this changed
  expect(screen.queryByText('Text')).not.toBeInTheDocument()
  expect(screen.getByText('faq')).toBeInTheDocument()
})

[khukhunaishvili]

Yes, $getRouteQuery is defined in MyPlugin.

Thank you, it is working.