Vue webappのユニットテストを実行中にエラーが発生しました

Question

私はVueJsでWebアプリケーションを作成しています。ユニットテストを設定しようとしています。vue-mdlユニットテストからインスピレーションを受けています。しかし、テストは私のコードでは正しく実行されておらず、vm.$elをundefinedとしているので、前進することはできません。ここで

はコンポーネントですが、私はテストしようとしています：

Confirmation.vue

<template> 
    <div> 
     Your order has been confirmed with the following details. 
    </div> 
</template> 

<script type="text/javascript"> 
export default { 
    data() { 
    return { 
     data_from_pg: null 
    } 
    } 
} 
</script> 

、ここでは

Confirmation.spec.jsを失敗したそれのためのテストであり、

import Confirmation from 'src/components/Confirmation' 
import { vueTest } from '../../utils' 

describe('Confirmation',() => { 
    let vm 
    let confirmation 
    before(() => { 
    vm = vueTest(Confirmation) 
    console.log('vm.$el ' + vm.$el) => this prints undefined 
    confirmation = vm.$el.querySelector('#confirmation') => so this line gives error 
    // confirmation = vm.$('#confirmation') 
    }) 

    it('exists',() => { 
    confirmation.should.exist 
    confirmation.should.be.visible 
    }) 
}) 

utils.js

export function vueTest (Component) { 
    const Class = Vue.extend(Component) 
    Class.prototype.$ = function (selector) { 
    return this.$el.querySelector(selector) 
    } 
    Class.prototype.nextTick = function() { 
    return new Promise((resolve) => { 
     this.$nextTick(resolve) 
    }) 
    } 

    const vm = new Class({ 
    replace: false, 
    el: 'body' 
    }) 

    return vm 
} 

私の完全なコードは、私は多くの時間を変更しようとしたすべてのテストの設定、で、here利用できますが、それを動作させる方法を見つけ出すことができませんでした。どこかで何らかのエラーが発生した場合はお知らせください。 utilsの中

Answer 1

vueTest機能がbodyタグにVueのインスタンスをロードしようとしている：

const vm = new Class({ 
    replace: false, 
    el: 'body' 
}) 
return vm 

ユニットテストは、アプリケーションへのエントリポイントとしてindex.html読み込み、それあなたではなく、個々のコンポーネントはありませんテストしたい。したがって、documentまたはhtml要素へのアクセス権がなく、コンポーネントはマウントされません。 vm.$mount()を使用することをお勧めします。

elementOrSelector引数が指定されていない場合、テンプレートはオフドキュメント要素としてレンダリングされます。

あなたは今$エルプロパティへのアクセス権を持っている必要があり、次の

const vm = new Class(); 
vm.$mount(); 
return vm; 

あなたのテストのようなものに上記の行を変更することができます。