How to include *.vue files from mocha testing?

@raphael_tillman 

To include *.vue files from Mocha testing, you will need to use a tool like vue-test-utils along with a module bundler like webpack or Browserify. Here is a general outline of how you can achieve this:

1. Install vue-test-utils and any necessary dependencies:

1

npm install --save-dev @vue/test-utils mocha

1. Configure vue-test-utils to work with Mocha by creating a setup file and enabling the Vue test environment. You can do this in your Mocha test file or in a separate setup file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// test-setup.js

import Vue from 'vue'
import { config } from '@vue/test-utils'

// Enable the Vue test environment
config.stubs['my-component'] = '<div></div>'

Vue.config.productionTip = false
Vue.config.devtools = false

global.expect = require('chai').expect
global.chai = require('chai')

1. Configure your module bundler to handle *.vue files by adding a loader for Vue components. For example, if you are using webpack, you can use vue-loader:

1

npm install --save-dev vue-loader vue-template-compiler

1. Update your webpack.config.js file to include the vue-loader for handling *.vue files:

1
2
3
4
5
6
7
8

module: {
  rules: [
    {
      test: /.vue$/,
      loader: 'vue-loader'
    }
  ]
}

1. Update your Mocha test file to import and use Vue components:

1
2
3
4
5
6
7
8
9

import { shallowMount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallowMount(MyComponent)
    expect(wrapper.contains('div')).to.be.true
  })
})

By following these steps, you should be able to include *.vue files from Mocha testing using vue-test-utils and a module bundler like webpack. This setup allows you to write unit tests for Vue components and include them in your Mocha testing environment.