相关疑难解决方法(0)

我最近一直在使用vuejs和bootstrap-vue。决定将单元测试添加到我的项目中。

我对单元测试不是很熟悉，因此我正在尝试尝试发现的一切以了解其工作原理。

Login.specs.js

import { shallowMount, mount } from '@vue/test-utils'
import Login from '@/components/auth/Login.vue'

describe('Login.vue', () => {
  it('is a Vue instance', () => {
   const wrapper = mount(Login, {
    mocks: {
     $t: () => 'Connexion' // i18N
    }
   })
  const h2 = wrapper.find('h2')
  expect(h2.text()).toBe('Connexion')
 })
})

Login.vue

<b-row align-h="center">
 <b-col class="text-center">
  <h2>{{ $t('login.connection') }}</h2>
 </b-col>
</b-row>

测试似乎一切正常。但是我发现了这些缺陷，并且可以找到一种方法来进行实际修复。

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

因此，我环顾四周，似乎需要将这些子组件添加到父亲中。

这是这些组件的文档。

我还添加了我的配置文件（与vue-cli 3生成的文件相同）

jest.congif.js

module.exports = {
  moduleFileExtensions: [
  'js',
  'jsx',
  'json',
  'vue'
 ],
 transform: …

这个问题让我很难受，我无法理解如何让Vue Test Utils和BootstrapVue一起玩得很好。

一个最小的例子看起来像这样：

MyComponent.vue

<template>
  <div>
    <b-button variant="primary" @click="play">PLAY</b-button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    play() {
      console.log("Let's play!");
    }
  }
}
</script>

在main.js我们使用BootstrapVue：Vue.use(BootstrapVue)。

这就是我试图测试click事件是否已被触发的方式：

import { expect } from 'chai';
import sinon from 'sinon';
import Vue from 'vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import BootstrapVue, { BButton } from 'bootstrap-vue';
import MyComponent from '@/components/MyComponent.vue';

const localVue = createLocalVue();
localVue.use(BootstrapVue);

describe('MyComponent.vue', …