E 2 EサイプレスでのClerk認証を持つアプリケーションのテスト

背景:Clerkは認証認証とユーザー管理製品です.
私は最近、認証のためにClerkを使用しているアプリのためのサイプレスでE 2 Eテストを書き始めて、私を案内するためにそこに何もありませんでした.
(注:私の場合、これはClerkのnext . js SDKを使ったNext . jsアプリですが、私の理解は、このコードはどこでも動作するということです.なぜなら、クライアントSDKはすべて、最終的にはフードの下でClerkjsを使用するからです).
私は、Clerkがロードするのを待つcustom Cypress commandを書きました、そして、彼らがすでにサインアウトされないならば、ユーザーを署名して、それからテスト資格証明書でサインしてください(Cypress.env()を通してアクセス可能であるように、あなたはこれらをセットすることができる方法でhereを見てください).

Cypress.Commands.add(`initializeAuth`, () => {
  cy.log(`Initializing auth state.`)

  cy.visit(`/`)

  cy.window()
    .should(window => {
      expect(window).to.not.have.property(`Clerk`, undefined)
      expect(window.Clerk.isReady()).to.eq(true)
    })
    .then(async window => {
      await window.Clerk.signOut()
      await window.Clerk.client.signIn.create({
        identifier: Cypress.env(`TEST_USER_IDENTIFIER`),
        password: Cypress.env(`TEST_USER_PASSWORD`),
      })
    })
})

テストを書くためにtypescriptを使っているなら(私はお勧めします!)また、このコマンドをcustom command typesに追加します.

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Initialize auth to a state where you're logged in as the test user.
       * @example cy.initializeAuth()
       */
      initializeAuth(): Chainable<void>
    }
  }
}

最終的に、このコマンドをbeforeまたはbeforeEachフックで使用して、テストの前にAuth状態をリセットします.

describe(`Test Page`, () => {
  beforeEach(() => {
    cy.resetDatabase() // another custom command
    cy.initializeAuth()
  })

  // ... tests go here
})

ハッピーテスト!あなたがこのアプローチで問題に遭遇するならば、知らせてください.