vue.js - Eenheidstesten van Vue met Karma en Typescript
Ik ben net begonnen met het gebruiken van Vuejs en ik heb echt een probleem om enkele tests te betrekken. Zo ziet mijn code eruit:
//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>
De fout die ik krijg is: TypeError: Cannot convert undefined or null to object waarvan ik denk dat deze gebeurt bij mount. Ik heb dit eerder geprobeerd zonder avoriaz en de Component die ik importeerde gelogd, wat leek te komen als undefined. Dus ik denk dat het probleem mogelijk zit bij import Component from "./component.vue" dat niet werkt zoals gewenst.
En hier is mijn 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
});
};