如何在 Cypress 上附加到 window

Question

我正在测试一个 vue 应用程序，它有一个依赖于 window 方法的混合：

export default {
  data () {
    return {
      aurora: window.Aurora || {}
    }
  },
  methods: {
    quickView () {
      const hasQuickViewElement = document.querySelector('#product-quickview')
      if (hasQuickViewElement && this.id && typeof this.aurora.quickview === 'function') {
        this.aurora.quickview(this.id)
      }
    },
    wishlist () {
      if (this.id && typeof this.aurora.showOverlay === 'function') {
        this.aurora.showOverlay('#add-shop-list', { prodId: this.id })
      }
    }
  }
}

我正在尝试模拟此 window 对象添加以下代码以支持文件

Cypress.on('window:before:load', (win) => {
    console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaa', win)
    win.Aurora = 'haushuhuashuas'
  })

  Cypress.on('window:load', (win) => {
    console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbb', win)
    console.log(win.Aurora)
  })

不幸的是，当测试运行时，'window:before:load' 永远不会运行并且不会执行 console.log 并且不会将值附加到 window。是否有另一种方法来拦截 window 并将数据附加到 window 以便我的组件在测试运行时使用它？

Answer 1

如果 'window:before:load' 没有运行，可能是您将该代码放在了规范的错误部分。

应该在访问之前，或者使用访问选项

cy.visit('...', {
  onBeforeLoad: (win) => {
    ...
  },
})

但我怀疑当时 Vue 可能没有设置 win.Aurora，因为它需要先启动。

组件测试

使用Cypress组件测试器时，需要给一个{ attachTo: ... }选项。

const win = cy.state('window')
win.Aurora = {
  quickview: () => 'Aurora is mocked'
}

const wrapper = mount(MyComponent, {
  attachTo: win 
})

现在 window:before:load 事件也将触发。

如何在 Cypress 上附加到 window

How to append to window on Cypress

javascript

vue.js

cypress

cypress-component-test-runner