Attaching resources in Vue component tests-CodePudding

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.

CodePudding user response：

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'
})