如何使用 Jest / Vue-test-utils import/include 插件进行测试？

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

要包含 Buefy 插件（或任何其他插件），您可以使用 vue-test-utils 中的 const localVue = createLocalVue() 来创建本地 vue 并使用 Buefy 插件，localVue.use(Buefy) 作为以下。这个 localVue 可以在安装包装器时包含。

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

如果您只想从插件中使用一个或两个组件，您可以导入单个组件，然后运行 localVue.use 多次这样：

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

如何使用 Jest / Vue-test-utils import/include 插件进行测试？

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

javascript

vue.js

jestjs

vue-test-utils