我目前在测试vue组件时遇到问题,下面的代码实际上有效,但测试不起作用。我做了一些搜索,我知道有一个问题,Vue 2.0在导入vue时只使用仅运行时构建,我需要使用vue / esm或使用render函数。我遇到的问题是我没有使用webpack或任何构建系统(使用tsconfig)来创建别名。
我尝试过只使用模板:''它仍然出错。当我使用render / createElement函数时,我似乎无法添加到我自己的html文件/模板中,因为它似乎只想创建一个新元素而不是注入模板。
错误:'[Vue警告]:您正在使用Vue的仅运行时版本,其中模板编译器不可用。将模板预编译为渲染函数,或使用包含编译器的构建。
COMPONENT:
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);
UNIT TEST:
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;
});
});
});