在赛普拉斯测试中，我如何存根 function 的参数

Question

我正在为 Google Optimize 实验编写 Cypress 集成测试，我想存根gtag库提供的实验变体值。

该值作为此 function 的callback参数提供：

gtag('event', 'optimize.callback', {
    name: '<experiment_id_A>',
    callback: (value) => 'unknown',
 });

我怎样才能存根参数“值”？ （不打断回调返回）

--

文档：

• 谷歌优化方法
• 柏树存根
• 诗乃存根

Answer 1

我对 gtag 了解不多，但如果您使用该页面上显示的“外部”function 模式而不是上面的“内联”function 模式，那么查看参考页面可能会存根。

在 React 或其他框架中存根内部函数的方法是将其暴露在window object 上。

function implementExperimentA(value) {
  if (value ==  '0') {
    // Provide code for visitors in the original.
  } else if (value == '1') {
    // Provide code for visitors in first variant.
  } else if (value == '2') {
    // Provide code for visitors in section variant.
  }
  ...
}

if (window.Cypress) {
  // Cypress is active
  console.log('referencing "implementExperimentA" on window')
  window.implementExperimentA = implementExperimentA;
}   

gtag('event', 'optimize.callback', {
    name: '<experiment_id_A>',
    callback: implementExperimentA
 })

然后在测试中，您可以在 beforeLoad 事件中设置存根

cy.visit('http://localhost:3000', {
  onBeforeLoad(win) {
    // Stub your functions here
    cy.stub(win, 'implementExperimentA').callsFake((realValue) => {
      const mockValue = 'abc'
      console.log(`implementExperimentA called with ${realValue}, subbing ${mockValue}`)
      return window.implementExperimentA(mockValue)
    })
  },
})

这应该在页面加载的最早点实例化存根，前提是已经设置了引用。

检查 console.logs 是否以正确的顺序触发，如果不是，则引用 function 可能会延迟，您可以使用cy.window()选择存根点。

cy.visit('http://localhost:3000')

...

cy.window().then(win => {
  // Stub your functions here
  cy.stub(win, 'implementExperimentA').callsFake((realValue) => {
    const mockValue = 'abc'
    console.log(`implementExperimentA called with ${realValue}, subbing ${mockValue}`)
    return window.implementExperimentA(mockValue)
  })
})