Single File Vue Component Tests Won't Run if Style is Tag is in File

Viewed 293

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>
0 Answers
Related