테스트 코드 역시 중복을 제거하여 가독성을 살리고 유지보수를 용이하게 해주는 것이 중요하다.
\n사실 테스트 코드는 작성하지 않아도 월급을 주지 않거나 잘리는 일은 없기 때문에 소홀히 하는 경향이 더 강하기 때문에 오히려 더더욱 접근성이 높여줄 필요가 있다.
\nCypress 에서 자주 사용하는 selector 가 있거나 일반적으로 적용하는 timeout 옵션이 있다면 매번 일일히 작성하는 것보다 helper 함수로 추출하는 것이 좋다.
\n하지만 Cypress 메소드는 cy 네임스페이스가 적용되는 공간에서 사용할 수 있기 때문에 일반적인 방법으로 helper 함수를 만드는 것이 어렵다.
따라서 Cypress 가 제공하는 Cypress.Commands.add() 메소드를 사용할 필요가 있다. 이 메소드는 root/Cypress/support/index.ts 에 작성한다.
첫번째 인자로 helper 함수의 이름을 string 으로 전달하고, 두번째 인자로 helper 함수의 오퍼레이션 역할을 하는 함수를 callback 으로 전달한다.
\nCypress.Commands.add(‘getByTestId’, (testid: string, timeout = 10000) =>\n cy.get(`[data-testid=${testid}]`, { timeout })\n);위 helper 함수는 html element 에 선언한 data-testid attribute 로 해당 element 에 접근하는 역할을 한다. 사용자와의 상호작용이 많은 서비스의 경우 특정 액션 이후에 해당 element 가 나타날 수 있기 때문에 기본적으로 timeout 옵션값으로 10000ms 를 전달한다.
자바스크립트 환경에서는 여기서 끝이지만 타입스크립트에서는 타입 선언이 필요하다.
\n따라서 root/Cypress/support/index.d.ts 에 다음과 같이 타입을 지정한다.
/// <reference types=\"cypress\" />\ndeclare namespace Cypress {\n\tinterface Chainable<Subject> {\n\t\tgetByTestId(testid: string, timeout?: number): Chainable<JQuery<HTMLElement>>;\n }\n}그리고 사소한 부분이라 빼먹기 쉬운데 이렇게 만든 helper 함수를 사용할 테스트 파일에 다음 /// <reference types=“../support” /> 를 상단에 삽입한다. 예시처럼 삽입하면 될 것이다.
/// <reference types=“cypress” />\n/// <reference types=“../support” />그럼 이제 테스트 코드(root/Cypress/integration/example-test.spec.ts)에서 다음처럼 사용이 가능하다.
cy.getByTestId('example-button').click();\n cy.getByTestId('exmaple-content').should('be.visible');