1

我正在测试一个 vue 应用程序，它有一个依赖于窗口方法的 mixin：

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 })
      }
    }
  }
}

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

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 并且不会将值附加到窗口。是否有另一种方法来拦截窗口并将数据附加到窗口，以便我的组件在测试运行时使用它？

4

1 回答 1

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事件也将触发。

于 2021-09-29T20:46:11.303 回答