Javascript 测试时出现Vue JS组件模板呈现问题

目前，我在测试vue组件时遇到了一些问题，下面的代码实际上可以工作，但测试不起作用。我已经进行了一些搜索，我知道存在一个问题，即Vue 2.0在导入Vue时仅使用运行时版本，我需要使用Vue/esm或使用渲染功能。我的问题是我没有使用webpack或任何构建系统（使用tsconfig）来创建别名

我尝试过只使用模板：“”，但仍然出错。当我使用render/createElement函数时，我似乎无法添加到自己的html文件/模板中，因为它似乎只想创建一个新元素，而不是注入一个模板

错误：'[Vue warn]：在模板编译器不可用的情况下，您正在使用仅运行时生成的Vue。可以将模板预编译为呈现函数，也可以使用编译器附带的构建

组成部分：

import {
    debounce
}
from 'npmPackage/debounce';
import Vue from 'vue';
import Component from 'vue-class-component';
import './navigation-bar.styles.less';
import {
    menuItemList,
    secondaryButton
}
from './types';

 @ Component({
    props: ['panels', 'secondaryButton'],
    // render: (createElement) => { return createElement('div', require('./navigation-bar.html')); }
    template: require('./navigation-bar.html')
})

export class NavigationBar extends Vue {
    public menuActive: boolean = false;
    public menuClass: string = '';
    public panels: menuItemList;
    public secondaryButton: secondaryButton;

    private animateMenu: () => void = debounce(this.toggleMenuClass, 300, true);

    public toggleMenu(): void {
        this.animateMenu();
    }

    private toggleMenuClass(): void {
        this.menuActive = !this.menuActive;
        this.menuClass = this.menuActive ? 'show' : 'hide';
    }
}

Vue.component('navigation-bar', NavigationBar);

单元测试：

import {
    expect
}
from 'chai';
import {
    spy,
    stub
}
from 'sinon';
import Vue from 'vue';
import {
    NavigationBar
}
from '../src/navigation-bar.component'
import {
    IMenuItem
}
from "../src/types";

describe('Navigation bar component', () => {
    let panels: Array < IMenuItem > ;
    let navigationBar: NavigationBar;

    beforeEach(() => {
        panels = [{
                label: 'my-account',
                action: function () {}
            }, {
                label: 'home',
                action: stub
            }
        ];
        navigationBar = new NavigationBar();
        navigationBar.$mount();
    });

    describe('Checks that only one action is being called per panel', () => {
        it('checks actions are called', () => {
            console.log(navigationBar.$el);
            navigationBar.panels = panels;
            const menuItem = navigationBar.$el.querySelectorAll('.menu-item');
            menuItem.length.should.equal(panels.length);

            const menuItem1 = menuItem[0];
            menuItem1.should.be.instanceOf(HTMLElement);
            const html = menuItem1 as HTMLElement;
            html.click();
            panels[0].action.should.have.been.calledOnce;
            panels[1].action.should.not.have.been.called;
        });
    });
});

导入{
期待
}
来自"柴",；
进口{
间谍，
树桩
}
来自‘西农’；
从“Vue”导入Vue；
进口{
导航栏
}
来自“../src/navigation bar.component”
进口{
IMenuItem
}
来自“./src/types”；
描述（'导航栏组件'，（）=>{
let面板：数组；
让导航栏：导航栏；
在每个之前（（）=>{
面板=[{
标签：“我的帐户”，
操作：函数（）{}
}, {
标签：“家”，
行动：存根
}
];
navigationBar=新的navigationBar（）；
导航栏。$mount（）；
});
description（'检查每个面板只调用一个操作'，（）=>{
它（'检查动作是否被调用'，（）=>{
控制台日志（导航栏$el）；
navigationBar.panels=面板；
const menuItem=navigationBar.$el.queryselectoral（“.menu项”）；
menuItem.length.should.equal（面板长度）；
const menuItem1=menuItem[0]；
menuItem1.should.be.instanceOf（HTMLElement）；
const html=menuItem1作为HTMLElement；
html.click（）；
面板[0]。action.should.have.been.calledOnce；
面板[1]。action.should.not.have.been.called；
});
});
});

获取Vue的CDN版本副本，并导入该副本，而不是npm Vue

或者，您也可以

从Vue/dist/Vue.js导入Vue

---

我也尝试过，但没有效果。它找不到组件的/dist，并且将CDN脚本添加到html中并不能让我在typescript vue组件中使用它。是的，您可能应该放弃typescript，因为这样您就需要交叉编译，并且可能会在某个地方丢失一些功能。我想知道为什么你的语法看起来如此不同。或者至少使用带有TypeScript的Webpack。在我目前的情况下，我不能这么做。我正在构建一个npm包，将其放入一个非常大的代码库中。尽量保持简单。在单元测试时，我一直试图编译html，但到目前为止，每个方法都失败了。谢谢你的帮助，虽然你会认为它会工作，但我必须有一些严重的错误，其中可能是你拉的类组件的东西。在vue之前，您是否尝试拉入类组件？或者，Vue已经有了一个组件语法，您可以在最底层使用它。尝试将模板代码插入其中，看看是否有效。