vue.js - 单元测试中的 Quasar Unknown 自定义元素错误

Question

我有一个使用 Quasar 按钮的简单 Vue 组件

<template>
  <div>
    <span class="count">{{ count }}</span>
    <q-btn @click="increment">Increment</q-btn>
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  data() {
    return {
      count: 0,
    };
  },

  methods: {
    increment() {
      this.count += 1;
    },
  },
};
</script>

我为它创建了一个单元测试

import { mount, createLocalVue } from '@vue/test-utils';
import { Quasar, QBtn } from 'quasar';
import TestComponent from '../TestComponent';

describe('TestComponent', () => {
  let wrapper;

  beforeEach(() => {
    const localVue = createLocalVue();
    localVue.use(Quasar, { components: { QBtn } });
    wrapper = mount(TestComponent, { localVue });
  });

  it('renders the correct markup', () => {
    expect(wrapper.html()).toContain('<span class="count">0</span>');
  });

  // it's also easy to check for the existence of elements
  it('has a button', () => {
    expect(wrapper.contains('button')).toBe(true);
  });
});

我的问题：

• 如果我一次一个地运行测试用例（it函数），测试将通过。例如，删除第二个it('has a button'...)然后运行测试。它会过去的。删除第一个时是一样的it('renders the correct markup'...)

• 但是，如果我保留所有测试用例，然后运行测试。第二个测试用例将失败并出现错误

console.error node_modules/vue/dist/vue.common.dev.js:630
      [Vue warn]: Unknown custom element: <q-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

      found in

      ---> <TestComponent>
             <Root>

我究竟做错了什么？

标签： vue.jsvue-test-utilsquasar

Answer 1

尝试删除之前的每个。我也看到了这个问题。不记得到底是什么修复了它，但这就是我的描述块。

describe('Mount Quasar', () => {
    const localVue = createLocalVue()
    localVue.use(Quasar, { components })

    const wrapper = shallowMount(Register, {
        localVue,
        stubs: ['router-link', 'router-view']
    })
    const vm = wrapper.vm

    it('passes the sanity check and creates a wrapper', () => {
        expect(wrapper.isVueInstance()).toBe(true)
    })
})