单元测试中的 Quasar Unknown 自定义元素错误答案

【问题标题】：Quasar Unknown custom element error in unit test单元测试中的 Quasar Unknown 自定义元素错误
【发布时间】：2019-08-27 08:17:04
【问题描述】：

我有一个使用 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.js vue-test-utils quasar

【解决方案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)
    })
})

【讨论】：

【解决方案2】：

您需要将 quasar 导入 webpack、babel 或 jest。

在jest.config.js 文件中

添加

  moduleNameMapper: {
    quasar: "quasar-framework/dist/umd/quasar.mat.umd.min.js"
  },

【讨论】：

最新版本是quasar: '<rootDir>/node_modules/quasar/dist/quasar.umd.min.js'