如何将 CDN 样式表 link 导入 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 link 添加到测试

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

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

How to import CDN stylesheet link into Cypress component test runner

vue.js

vue-cli

cypress

cypress-component-test-runner