How to import CDN stylesheet link into Cypress component test runner

Question

I have a vue-cli project. I've set successfully the cypress component test runner using the official documentation: https://docs.cypress.io/guides/component-testing/introduction. Now I have a problem using icon fonts that are delivered in my app through CDN links (namely fontawesome and mdi icons), included in my index.html. One of these links, for ex.:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />

Since the component test runner does not load the index.html, the icons are missing and some functionalities cannot be tested. And I haven't found a place were I can include these links (Importing them in every <component>.vue file is not a solution).

Does anyone have a solution to this problem?

NB: I don't want to install npm packages of those frameworks. I need to use the CDN delivered versions.

Answer 1

Cypress wraps the vue-test-utils mount() function, which has an attachTo option, so this is how you can add the CDN link into the test

HelloWorld.spec.ts

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

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

    // This elem is to attach the component to document 
    const elem = document.createElement('div')
    if (document.body) {
      document.body.appendChild(elem)
    }

    // Attach the CDN link to document
    const linkElem = document.createElement('link');
    linkElem.setAttribute('rel', 'stylesheet');
    linkElem.setAttribute('href', 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css');
    if (document.head) {
      document.head.appendChild(linkElem)
    }

    mount(HelloWorld, {
      propsData: {
        msg
      },
      attachTo: elem
    })

    cy.get('i').should('be.visible');             // fails if the CDN link is omitted

  })
})

I'm not sure how the icons contribute to the test logic, but you can verify they are loaded by cy.get('i').should('be.visible').

If not loaded (comment out linkElem above) the test fails with

This element <i.mdi.mdi-account> is not visible
because it has an effective width and height of: 0 x 0 pixels.

HelloWorld.vue template with icon

<template>
  <div class="hello">
    <h1><i class="mdi mdi-account"></i> {{ msg }}</h1>

---

BTW I couldn't get the example in the docs working, I had to use vue-cypress-template

Ref Getting Started with Cypress Component Testing (Vue 2/3) - Apr 06 2021 • Lachlan Miller