You can use Cypress plus cypress-vue-unit-test to test single file components (.vue files) that you create. If your components have been built with vue-material then you need it to be available during test so that your component under test loads correctly. I have found the following template to be effective and it could be beneficial to other users to document this.
const mountVue = require('cypress-vue-unit-test')
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
// Create the options to pass to mountView()
// Material-design is a plugin which is loaded with 'use'.
// Html option is needed to inject Roboto font and icons.
const options = {
extensions: {
use: [VueMaterial]
},
html: `
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
</head>
<body>
<div id="app"></div>
</body>
</html>
`
}
import Component from '~/components/your-component.vue'
describe('Component unit tests', () => {
beforeEach(mountVue(Component, options))
it('should do something', () => {
// Insert cy tests here.
})
})
You can use Cypress plus cypress-vue-unit-test to test single file components (.vue files) that you create. If your components have been built with vue-material then you need it to be available during test so that your component under test loads correctly. I have found the following template to be effective and it could be beneficial to other users to document this.