Cypress：无法使用基本示例进行存根。我可能缺少什么？

Question

由于某种原因，我无法在这里存根。我已经将我的代码减少到几乎完全如此。这应该根据文档工作，但我想知道我是否缺少打字稿/反应挂钩的更详细的细节？感觉完全不像实际情况，但谁知道呢。如果您正在阅读本文并占用您的时间，请提前致谢。我很欣赏你所做的事情。这是我的例子：

// connection.ts (the method to stub)

export const connectFn = async () => {
  return 'i should not be here'
}

// ./reactHook.ts

import { connectFn } from './connection'

export const useMyHook = () => {
  const handleConnect = async () => {
    const result = await connectFn()
    console.log(result)
    // expected: 'i have been stubbed!'
    // actual: 'i should not be here
  }

  return {
    handleConnect
  }
}

// ./App.ts

export const App = () => {
  const { handleConnect } = useMyHook()
  return <button onClick={handleConnect}>Connect</button>
}

// ./cypress/integration/connection.spec.ts

import * as myConnectModule from '../../connection'

describe('stub test', () => {
  it('stubs the connectFn', () => {
    cy.stub(myConnectModule, 'connectFn').resolves('i have been stubbed!')
    cy.get('[data-testid=connect-btn]').click()
    // assertions about the view here...
  })
})

我认为我非常了解 cypress 和 Sinon 文档。我读到 cypress 需要一个存根对象，而不是直接命名的导出 - 因此 * 作为导入。我也尝试过各种导出方式。我直接使用了文档中的示例，但没有效果。然后我认为这可能是打字稿问题，但事实似乎并非如此。我已将实际代码简化为此处的示例。我什至删除了除了测试日志之外的所有内容，但我仍然没有得到它。

Answer 1

要成功存根，您需要存根（替换）同一个实例。

在reactHook.ts中

import { connectFn } from './connection'

if (window.Cypress) {
  window.connectFn = connectFn
}

测试中

cy.window().then(win => {
  cy.stub(win, 'connectFn').resolves('i have been stubbed!')
  cy.get('[data-testid=connect-btn]').click()
  ...
}}

顺便说一句，

useMyHook

意味着一个React钩子，如果是这样，你可能需要一个

cy.wait(0)

来释放主JS线程并允许钩子运行。