javascript - How to importinclude plugin in testing with JestVue-test-utils? - Stack Overflow

admin管理员组

文章数量:1023815

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 ponent correctly? For recursive ponents, 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 ponent 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 '@/ponents/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 ponent in the test.

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 ponent correctly? For recursive ponents, 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 ponent 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 '@/ponents/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 ponent in the test.

• javascript
• vue.js
• jestjs
• vue-test-utils

Share Improve this question Follow edited Feb 14, 2022 at 3:58 Spike asked Jan 31, 2022 at 2:23 SpikeSpike 15144 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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]

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 ponents you want to use from the plugin, you can import the individual ponents 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,
})

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 ponent correctly? For recursive ponents, 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 ponent 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 '@/ponents/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 ponent in the test.

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 ponent correctly? For recursive ponents, 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 ponent 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 '@/ponents/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 ponent in the test.

• javascript
• vue.js
• jestjs
• vue-test-utils

Share Improve this question Follow edited Feb 14, 2022 at 3:58 Spike asked Jan 31, 2022 at 2:23 SpikeSpike 15144 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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]

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 ponents you want to use from the plugin, you can import the individual ponents 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,
})

本文标签： javascriptHow to importinclude plugin in testing with JestVuetestutilsStack Overflow