如何使用 Cypress 存根模塊 function？

Question

我想用 Cypress 創建一個測試，它有一個 React 組件，它使用一個身份驗證庫 ( @okta/okta-react ) 和一個 HOC ( withOktaAuth )。

我的組件如下所示：

// Welcome.js

import { withOktaAuth } from '@okta/okta-react'

const Welcome = ({authState}) => {
  return <div>{authState.isAuthenticated ? 'stubbed' : 'not working'}</div>
}

export default withOktaAuth(Welcome)

我試着做一個這樣的測試：

// test.js

import * as OktaReact from '@okta/okta-react'

const withOktaAuthStub = Component => {
  Component.defaultProps = {
    ...Component.defaultProps,
    authState: {
      isAuthenticated: true,
      isPending: false
    },
    authService: {
      accessToken: '123'
    }
  }

  return Component
}

describe('Test auth', () => {
  before(() => {
    cy.stub(OktaReact, 'withOktaAuth').callsFake(withOktaAuthStub)
  })

  it('Stubs auth', () => {
    cy.visit('/welcome')
    cy.contains('stubbed')
  })
})

當我運行測試時，組件仍然沒有使用存根的 function。 很感謝任何形式的幫助！

Answer 1

提交這個問題已經 2 年了，但是對於那些仍然遇到該錯誤的人，賽普拉斯提供了有關 Okta e2e 測試的指南： https://docs.cypress.io/guides/end-to-end-testing/okta-身份驗證#Adapting-the-back-end