테스트 시 Vue JS 구성 요소 템플릿 렌더링 문제

테스트 시 Vue JS 구성 요소 템플릿 렌더링 문제

현재 vue 컴포넌트 테스트에 문제가 있습니다.아래 코드는 실제로 동작하지만 테스트가 제대로 진행되지 않습니다.검색을 좀 해봤는데 Vue 2.0에서 vue를 Import할 때 런타임 전용 빌드만 사용하고 vue/esm을 사용하거나 렌더 기능을 사용해야 하는 문제가 있다는 것을 알고 있습니다.문제는 웹 팩이나 빌드 시스템(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;
        });
    });
});

CDN 버전의 Vue 복사본을 가져와 npm Vue 대신 가져옵니다.

또는 다른 방법으로import Vue from vue/dist/vue.js

언급URL : https://stackoverflow.com/questions/46446372/vue-js-component-template-rendering-issue-when-testing