E2E Cypress에서 사무원 인증으로 앱 테스트

배경: Clerk은 호스팅 인증 및 사용자 관리 제품입니다.


나는 최근에 인증을 위해 Clerk을 사용하는 앱에 대해 Cypress에서 E2E 테스트를 작성하기 시작했고 거기에는 나를 안내할 어떤 것도 없었기 때문에 여기에서 내가 약간 만지작거리며 끝낸 결과가 나왔습니다.

(참고: 내 경우에는 Clerk의 Next.js SDK를 사용하는 Next.js 앱이지만 클라이언트 SDK가 모두 내부적으로 ClerkJS를 사용하기 때문에 이 코드가 모든 곳에서 작동한다고 이해합니다.)

나는 사무원이 로드되기를 기다리고, 사용자가 아직 로그아웃하지 않은 경우 로그아웃한 다음 테스트 자격 증명으로 로그인하는 custom Cypress command을 작성했습니다(액세스할 수 있도록 설정하는 방법은 here 참조). Cypress.env() )를 통해.

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 후크에서 이 명령을 사용하고 싶을 것입니다.

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

  // ... tests go here
})

행복한 테스트! 이 방법에 문제가 있으면 알려주십시오.