Unit-Test eine Typoskript-Vue-Komponente

Question

Ich muss meine Komponente testen können (Methoden, berechnete Eigenschaften, Daten, ...). Allerdings, wenn ich meine vue Komponente in meinem Unit-Test importieren:

import Pagination from 'src/components/shared/pagination.vue' 
import { newComponent } from '../component-factory' 

describe('pagination.vue',() => { 
    const propsData = { 
     metadata: { 
      page: 2, 
      records: 155, 
      total: 11, 
     }, 
     perPage: 15, 
    } 

    it('should have correct number of records',() => { 
     const ctor = Vue.extend(Pagination) 
     const vm = new ctor({propsData}).$mount() 
     expect(vm.firstRecord).toBe(16) 
     expect(vm.lastRecord).toBe(30) 
    }) 
... 

vm ist vom Typ Vue und somit nicht die firstRecord/lastRecord Eigenschaften hat. Durchführung des Tests mit Karma zeigt einen Erfolg, aber die Typoskript Compiler spuckt Fehler:

ERROR in ./tests/shared/pagination.spec.ts 
(16,19): error TS2339: Property 'firstRecord' does not exist on type 'Vue'. 

ERROR in ./tests/shared/pagination.spec.ts 
(17,19): error TS2339: Property 'lastRecord' does not exist on type 'Vue'. 

I Casting versucht:

... 
     const vm = new ctor({propsData}).$mount() as Pagination 
... 

Aber das führt zu einer Warnung in VSCode:

[ts] Cannot find name 'Pagination'. 

Und hat die Wirkung, vm als Typ any zu behandeln, was völlig kontraproduktiv ist.

Ich denke, das alles kommt von der Tatsache, dass, wenn .vue Dateien verwenden Sie die Erklärung hinzufügen:

declare module '*.vue' { 
    import Vue from 'vue' 
    export default typeof Vue 
} 

die eindeutig die Art aller .vue Dateien Vue setzt, die nicht genau ist eine Lüge, aber ist auch nicht hilfreich ... Irgendwelche Vorschläge? Was mache ich falsch?

Für die Zukunft habe ich versucht, vuetype zu verwenden, die .d.ts Dateien für jede .vue Datei erzeugt, sondern lief in this issue. Außerdem, there is a request machen .vue einen erstklassigen Bürger in der Schreibmaschine Ökosystem, die dieses Problem beseitigen würde. Und, habe ich nur noch eine Anfrage für eine vue language service extension

Answer 1

Bis Vue 2.5, ihre Typoskript Dokumentationsseite empfohlen, eine Schnittstelle exportieren, die Vue erstreckt, wenn Sie nicht vue-class-component verwenden würden. Sie können diese Schnittstelle zur Verwendung in Ihren Tests exportieren, um Ihre Komponenteninstanz zu konvertieren. Die Empfehlung wurde aus der Dokumentation entfernt, aber ich konnte nicht herausfinden, wie ich meine Tests ändern konnte, um die Schnittstelle nicht zu benötigen.

Es sieht so aus, als könnte Vuetype diese Schnittstellen für Sie generieren, aber ich habe sie nur manuell erstellt.

ist hier ein stark vereinfachtes Beispiel, aber man kann alles in Ihrer Schnittstelle definieren, die Sie auf vm, dh Daten, Requisiten, Methoden verweisen würden:

// NOTE: Make sure your interface extends `Vue`! 
export interface PaginationComponent extends Vue { 
    firstRecord: number, 
    lastRecord: number 
} 

export default { 
    name: 'Pagination', 
    data: function() { 
    return { 
     firstRecord: 16, 
     lastRecord: 30, 
    } 
    } 
} 

Für den Test können Sie die Komponenteninstanz gegossen zum Typ der exportierten Schnittstelle:

import Pagination, {PaginationComponent} from 'src/components/shared/pagination.vue' 

describe('pagination',() => { 
    it('should know about component data fields',() => { 
    const ctor = Vue.extend(Pagination) 
    const vm : PaginationComponent = new ctor().$mount() 
    expect(vm.firstRecord).toBe(16) 
    expect(vm.lastRecord).toBe(30) 
    }) 
})