I am using chai, mocha, karma and vue-test-utils to test my vue components. After a lot of investigation I have found that tests only run when there is no style in the single file component. There are no errors or anything the test files cimply get skipped over and only components without style runs. Is here another plugin or dependency I need or something I am missing from my config file? If I comment out or remove the style from my button.vue below the test runs and passes. I haven't' been able to find any info on this issue. Any help is appreciated thanks.
karma.config.js
// To create this file with karma init use must use powershell or command prompt
// import webpack config and env set to test
const webpackConfig = require('./config/webpack.prod.config.js')
// the place to look for tests
const glob = 'tests/**/*.test.js'
const webpackPreprocessor = {
[glob]: ['webpack']
}
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai', 'chai-dom', 'chai-as-promised'],
files: [
glob,
{ pattern: './src/html/includes/*.html' }
],
client: {
mocha: {
// change Karma's debug.html to the mocha web reporter
reporter: 'nyan'
}
},
exclude: [
'src'
],
preprocessors: webpackPreprocessor,
autoWatchBatchDelay: 500,
restartOnFileChange: true,
webpack: webpackConfig,
reporters: ['spec'],
// web server port
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
singleRun: true,
concurrency: Infinity,
webpackMiddleware: {
stats: 'errors-only'
}
})
}
button.test.js
import component from '../../src/components/inline-components/button.vue'
import { mount } from '@vue/test-utils'
describe.only('button.vue', function () {
it('renders a vue instance', () => {
expect(mount(component).isVueInstance()).to.be.true
})
})
button.vue
<template>
<!-- v-html will take html string and make it actual html -->
<button
class="btn"
:class="[buttonSize, buttonType]"
v-html="display"/>
</template>
<script>
export default {
name: 'button',
data () {
return {}
},
props: {
text: {
type: String,
required: false,
default: ''
}
}
}
</script>
//
// When I comment out this section the test runs and passes
//
<!-- <style lang="scss" scoped>
// @import "../../scss/primary-variables";
// @import "../../scss/global/vue";
// .btn {
// margin-right: $size-sm;
// margin-bottom: $size-sm;
// }
// </style>