ค้นหาเว็บไซต์

vue.js - การทดสอบหน่วย Vue ด้วย Karma และ Typescript


ฉันเพิ่งเริ่มใช้ Vuejs และฉันกำลังประสบปัญหาจริง ๆ ในการพยายามให้มีการทดสอบเข้ามา นี่คือวิธีที่โค้ดของฉันดู:

//myapp.specs.ts    
import Vue from "vue";
import { mount } from 'avoriaz';
import Component from "./component.vue"

describe("My App", () => {
    it("works", () => {      
        const wrapper = mount(Component);

        expect(wrapper.html()).toContain("Hello, World");
    });
});

//myapp.vue
<script lang="ts" src="./component.ts"></script>
<template src="./template.html"></template>
<style src="./styles/styles.css"></style>

//component.ts    
import { Foo } from "./foo"

export default {
    data() {
        return {
            isLoading: true,
            data: new Foo()
        }
    },
    created() {
        this.populate();
    },
    methods: {
        populate() {
            new FooRepository().get().then((fooData: Foo) => {
                this.isLoading = false;
                this.data = fooData;
            });
        }
    }
}

   //template.html
   <div v-if="!isLoading" >
       <h2>Heading</h2>
       <textarea name="myText" v-model="data.Text"></textarea>
   </div>

ข้อผิดพลาดที่ฉันได้รับคือ: TypeError: Cannot convert undefined or null to object ซึ่งฉันคิดว่ามันเกิดขึ้นที่ mount ก่อนหน้านี้ฉันเคยลองแบบไม่ใช้ avoriaz และบันทึก Component ที่ฉันนำเข้า ซึ่งดูเหมือนว่าจะได้ค่าเป็น undefined ดังนั้นฉันคิดว่าปัญหาอาจอยู่ที่ import Component from "./component.vue" ที่ไม่ทำงานตามที่ต้องการ

และนี่คือไฟล์ Karma.conf.js ของฉัน:

module.exports = function(config) {
    config.set({
        basePath: './',
        frameworks: ['jasmine', "karma-typescript"],
        files: [
            { pattern: './**/*.ts' },
            { pattern: './**/*.js' }
        ],
        exclude: [
            './**/*component.ts',
            './**/*build.js', //component files server as an entry point only.
            './**/*config.js'
        ],
        preprocessors: {
            './**/*.ts': ['karma-typescript']
        },
        karmaTypescriptConfig: {
            tsconfig: './tsconfig.json'
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
        concurrency: Infinity
    });
};