如何在Cypress中为window对象添加属性以适配Vue组件Mixin依赖

看起来你遇到的问题是全局的window:before:load事件没有触发，这其实是因为Cypress中全局监听这个事件的可靠性不如针对单个cy.visit调用配置钩子来得高。另外，你之前给win.Aurora赋值字符串的方式也有问题——你的Mixin里检查的是typeof this.aurora.quickview === 'function'，字符串类型会导致这些方法逻辑不执行。

下面是几种可靠的解决方案：

1. 使用cy.visit的onBeforeLoad选项（端到端测试场景） #

这是Cypress官方推荐的在页面加载前修改window对象的方式，它会确保在你的Vue应用初始化之前，window.Aurora已经被注入：

cy.visit('/your-page-path', {
  onBeforeLoad(win) {
    // 模拟Aurora对象，包含Mixin需要的方法
    win.Aurora = {
      quickview: cy.stub().as('quickviewStub'), // 用stub方便后续断言
      showOverlay: cy.stub().as('showOverlayStub')
    }
  }
})

// 之后可以断言方法是否被正确调用
cy.get('[data-test="quickview-btn"]').click()
cy.get('@quickviewStub').should('have.been.calledWith', 'your-product-id')

2. 组件测试中模拟window对象（Vue组件单测场景） #

如果你是直接挂载组件进行测试（使用cypress/vue的mount方法），可以在挂载前通过cy.window()修改全局window：

import { mount } from 'cypress/vue'
import YourComponent from './YourComponent.vue'

it('triggers quickView correctly', () => {
  // 在挂载组件前注入window.Aurora
  cy.window().then(win => {
    win.Aurora = {
      quickview: cy.stub(),
      showOverlay: cy.stub()
    }
  })

  // 挂载组件并传入必要的props
  mount(YourComponent, {
    props: {
      id: 'test-prod-123'
    }
  })

  // 触发quickView方法并断言
  cy.get('[data-test="quickview-button"]').click()
  cy.wrap(window.Aurora.quickview).should('have.been.calledWith', 'test-prod-123')
})

3. 全局配置（如果所有测试都需要Aurora） #

如果你的所有测试都需要模拟window.Aurora，可以在cypress/support/e2e.js（或对应的支持文件）中全局配置：

// cypress/support/e2e.js
beforeEach(() => {
  cy.visit(Cypress.config('baseUrl'), {
    onBeforeLoad(win) {
      win.Aurora = {
        quickview: () => {},
        showOverlay: () => {}
      }
    }
  })
})

为什么之前的全局window:before:load没触发？ #

全局的Cypress.on('window:before:load')需要在Cypress启动时就注册完成，如果你的支持文件加载顺序有问题，或者测试中使用了cy.visit之外的方式加载组件（比如直接挂载），这个事件可能不会触发。而onBeforeLoad是绑定到具体的页面访问，可靠性更高。

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