javascript - 如何在 Jest/Vue-test-utils 测试中导入/包含插件？

Question

使用 Jest 和 Vue-test-utils 测试基本按钮实现时，测试有效，但我收到以下警告:

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

我有信心是因为我没有正确包含 Buefy 插件依赖项，而且我在这里没有太多经验。 这是我的基本按钮的单个文件组件:

<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>

这是我的测试:

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)
    })
})

我希望能够帮助您了解在测试中包含 Buefy b-button 组件的适当方法。

Answer 1

发布 Vue 3 解决方案。如StevenSiebert提到，createLocalVue 不再适用于 v2 @vue/test-utils(Vue 3 测试需要)。您需要在测试中使用 global 对象。

根据 docs对于 mount，要注册一次性安装插件，您可以使用:

import foo from 'foo'

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

要在所有测试中注册插件，您可以添加到测试设置文件，即 setup.js。请参阅docs

import foo from 'foo'

config.global.plugins = [foo]