使用Karma和Typescript对Vue进行单元测试

时间:2017-11-21 09:58:36

标签: typescript vue.js vuejs2 karma-runner

我刚刚开始使用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,这似乎是未定义的。所以我认为问题可能在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
    });
};

0 个答案:

没有答案