2

我有一个 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 交付的版本。

4

1 回答 1

1

Cypress 包装了 vue-test-utilsmount()函数，该函数有一个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），则测试失败

此元素 <i.mdi.mdi-account> 不可见
，因为它的有效宽度和高度为：0 x 0 像素。

带有图标的 HelloWorld.vue 模板

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

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

参考Cypress 组件测试入门 (Vue 2/3) - 2021 年 4 月 6 日 • Lachlan Miller

于 2021-05-10T11:09:51.703 回答