Vue Cypress组件测试中如何引入index.html加载的资源

组件测试运行在独立隔离的环境中，不会自动加载项目根目录下的index.html，你可以根据资源类型选择对应方式引入：

全局通用样式、JS插件、公共指令类资源 #

直接在组件测试的support入口文件中统一引入即可，所有测试用例运行前会自动加载该文件：

• Cypress 10及以上版本的默认入口路径为cypress/support/component.js（TS项目为component.ts）
• Cypress 10以下版本的默认入口路径为cypress/support/index.js

示例配置：

// cypress/support/component.js
// 引入全局样式文件，包括CSS、SCSS、Less等
import '../../src/assets/styles/reset.css'
import '../../src/assets/styles/global.scss'

// 引入全局挂载的Vue插件、自定义指令等
import ElementUI from 'element-ui'
import customDirective from '../../src/directives/custom'
import { mount } from '@cypress/vue'

// 重写全局mount命令，默认注入全局插件，不用每个用例重复配置
Cypress.Commands.add('mount', (component, options = {}) => {
  options.global = options.global || {}
  options.global.plugins = options.global.plugins || []
  options.global.directives = options.global.directives || {}
  // 注册全局插件
  options.global.plugins.push(ElementUI)
  // 注册全局指令
  options.global.directives.custom = customDirective

  return mount(component, options)
})

需要写在HTML标签里的meta、CDN资源、根节点配置类资源 #

通过自定义组件测试的HTML模板实现，把原index.html里的公共标签迁移到模板中即可：

1. 新建测试专用模板文件，比如cypress/support/component-index.html，内容参考：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 此处放原index.html里的全局script标签、CDN资源引入、meta配置等 -->
  <title>Component Test</title>
</head>
<body>
  <!-- 保留和原index.html一致的根节点配置 -->
  <div id="app"></div>
</body>
</html>

2. 在Cypress配置文件cypress.config.js/cypress.config.ts中指定模板路径：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite' // 使用webpack则替换为对应值
    },
    indexHtmlFile: 'cypress/support/component-index.html'
  }
})

单测试用例专属资源 #

如果资源仅在少数测试用例中使用，不需要全局加载，直接在对应测试文件中引入，或者在mount时传入配置即可：

import { mount } from '@cypress/vue'
import HelloWorld from './HelloWorld.vue'
// 引入当前用例专属的样式文件
import './test-case-special.css'

describe('HelloWorld', () => {
  it('renders a message', () => {
    const msg = 'Hello Cypress Component Testing!'
    mount(HelloWorld, {
      propsData: { msg },
      global: {
        // 传入当前用例需要的特殊插件、mocks等
      }
    })
    cy.get('h1').should('have.text', msg)
  })
})

注意：不要直接引用项目根目录的index.html作为测试模板，该文件是为本地开发服务、E2E测试准备的，直接复用容易出现资源路径冲突、环境变量不匹配的问题。

内容的提问来源于stack exchange，提问作者user19335918