CODEWITHSUNDEEP
javascriptvue.jsjestjsvue-test-utils
Spike
Spike

Reputation: 151

How to import/include plugin in testing with Jest / Vue-test-utils?

When testing a base button implementation using Jest and Vue-test-utils, the tests work but I am getting the following warning:

[Vue warn]: Unknown custom element: b-button - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I am confident is because I am not including the Buefy plugin dependencies correctly, and I don't have a lot of experience here. Here is my single file component for the base button:

<template>
  <b-button data-testid="base-button" @click="$emit('click')">
    {{ buttonLabel }}
  </b-button>
</template>

<script>
export default {
  props: {
    buttonLabel: {
      type: String,
      default: 'Button',
    },
  },
}
</script>

<style></style>

And here is my testing:

import { mount } from '@vue/test-utils'
import BaseButton from '@/components/base/BaseButton'

const Component = BaseButton
const ComponentName = 'BaseButton'

const global_wrapper = mount(Component, {})

describe(ComponentName, () => {
  it('should render the button', () => {
    const wrapper = global_wrapper
    const button = wrapper.find('[data-testid="base-button"]')
    expect(button.exists()).toBeTruthy()
  }),
    it('should emit the click event on a click', async () => {
      const wrapper = global_wrapper
      console.log(wrapper.html())
      const button = wrapper.find('[data-testid="base-button"]')
      button.trigger('click')

      const clickCalls = wrapper.emitted('click')

      expect(clickCalls).toHaveLength(1)
    })
})

I would appreciate help understanding the appropriate way to include the Buefy b-button component in the test.

Upvotes: 2

Views: 3784

Answers (2)

shmaryeh
shmaryeh

Reputation: 41

Posting for a Vue 3 solution. As StevenSiebert mentioned, createLocalVue is no longer available with v2 @vue/test-utils (needed for Vue 3 tests). You'll need to use the global object in your tests.

Per the docs for mount, to register the plugin for one-off mounts, you can use:

import foo from 'foo'

mount(Component, {
  global: {
    plugins: [foo]
  }
})

To register the plugin in all tests, you can add to your test setup file, i.e. setup.js. See docs

import foo from 'foo'

config.global.plugins = [foo]

Upvotes: 4

Spike
Spike

Reputation: 151

To include the Buefy plugin (or any other plugin), you can use something like const localVue = createLocalVue() from vue-test-utils to create a local vue and use the Buefy plugin, localVue.use(Buefy) as below. This localVue can be included when mounting the wrapper.

import { createLocalVue, mount } from '@vue/test-utils'
import Component from '../Component'
import Buefy from 'buefy'

const localVue = createLocalVue()
localVue.use(Buefy)

const global_wrapper = mount(Component, {
  localVue,
})

If you only have one or two components you want to use from the plugin, you can import the individual components and run localVue.use multiple times as such:

import { createLocalVue, mount } from '@vue/test-utils'
import Component from '../Component'
import { Button, Checkbox } from 'buefy'

const localVue = createLocalVue()
localVue.use(Button)
localVue.use(Checkbox)

const global_wrapper = mount(Component, {
  localVue,
})

Upvotes: 2

Related Questions