如何将 CDN 样式表链接导入 Cypress 组件测试运行程序

Posted 2023-02-16

【中文标题】如何将 CDN 样式表链接导入 Cypress 组件测试运行程序

【英文标题】：How to import CDN stylesheet link into Cypress component test runner

【发布时间】：2021-07-31 08:54:39

【问题描述】：

我有一个 vue-cli 项目。我已经使用官方文档成功设置了 cypress 组件测试运行器：https://docs.cypress.io/guides/component-testing/introduction。现在，我在使用我的 index.html 中包含的 CDN 链接（即 fontawesome 和 mdi 图标）在我的应用程序中提供的图标字体时遇到问题。这些链接之一，例如：

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

由于组件测试运行器没有加载index.html，图标丢失，部分功能无法测试。而且我还没有找到可以包含这些链接的地方（在每个<component>.vue 文件中导入它们不是解决方案）。

有没有人能解决这个问题？

注意：我不想安装这些框架的 npm 包。我需要使用 CDN 交付的版本。

【参考方案1】：

Cypress 封装了 vue-test-utils mount() 函数，该函数有一个 attachTo 选项，因此您可以将 CDN 链接添加到测试中

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

  )
)

我不确定这些图标对测试逻辑有何贡献，但您可以验证它们是由cy.get('i').should('be.visible') 加载的。

如果没有加载（注释掉上面的linkElem）测试失败

此元素 不可见 因为它的有效宽度和高度为：0 x 0 像素。

带有图标的HelloWorld.vue 模板

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

---

顺便说一句，我无法让文档中的示例正常工作，我不得不使用 vue-cypress-template

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

【讨论】：

非常感谢！有效。我需要这些图标，因为我正在使用 Vuetify 并且它们的组件依赖于 mdi 图标，并且当缺少点击事件时，例如，无法在相应的元素上触发。谢谢！