Attaching resources in Vue component tests

June 25, 2022

I’m running component tests on my Vue project, have followed the documentation Getting Started with Cypress Component Testing (Vue 2/3).

import { mount } from '@cypress/vue'
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld', () => {
  it('renders a message', () => {
    const msg = 'Hello Cypress Component Testing!'
    mount(HelloWorld, {
      propsData: {
        msg
      }
    })

    cy.get('h1').should('have.text', msg)
  })
})

How do I include resources that are normally loaded to index.html, as there is no base page in component tests.

>Solution :

Create your resource link on document and attach your component to a child element of the same document, for example

const div = document.createElement('div')
div.id = 'root'
document.body.appendChild(div)

const linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/6.7.96/css/materialdesignicons.min.css');
document.head.appendChild(linkElem)

mount(HelloWorld, {
  propsData: {
    msg
  },
  attachTo: '#root'
})