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

Question

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

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

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

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

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

Answer 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)测试失败

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>
  <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