Cypress 소개 Cypress는 많은 기업에서 사용하고 있는 Front-End Testingtool입니다. Cypress는 브라우저에서 실행되는 모든 것을 테스트 하는데사용됩니다. open source이고 테스트실행을 추적하는 기능을 가진 대시보드를 사용할 수 있는 유료 버전도있습니다. Cypress 특징 단위 테스트, 통합 테스트, E2E 테스트를 수행 할 수있습니다. Javascript로 작성되었으며 Cypress 메소드들로 실행하기 때문에 Javascript를 모르더라도 사용하는데 문제가없습니다. Mocha & Chai 를사용합니다. 애플리케이션과 동일한 실행루프에서 실행되기 때문에 실제 사용되는 애플리케이션과 매우 근접한 환경에서 테스트가 진행됩니다. 셀레늄등에서 사용할수 없는 브라우저 api들을 사용할 수있습니다. 실시간 리로딩을제공합니다. 실행속도가 빠르다. error 발생시 디버깅하기 수월합니다. (스택추적) 자 이제 테스트 코드를 작성해보겠습니다. React 초기 세팅을 합시다.(저는 cra를사용했습니다.) 기본적인 설정은 넘어가겠습니다.! (cypress를 설치하고 나면 lint설정등을 해주셔야 합니다만 plugin이 있으니 설치하고 사용하시면됩니다!) Cypress 설치 cypress를 설치합니다. npm install cypress --save-dev or yarn add cypress --dev cypress open 명령어로 실행 가능합니만 편하게 실행하기 위해 스크립트에 추가 해봅시다. package.json ( "scripts": ( "cypress:open": "cypress open" ) ) yarn cypress:open 으로 실행하시면됩니다. 설치하고 나면 Cypress 폴더가 생성되고 예제코드들이 추가되어있습니다. 저는 전부 삭제하고 storybook을 만들었던 코드의 카운터 컴포넌트를 테스트해봤습니다. 아래와 같은 폴더가추가됩니다. React Component 작성 import React from "react" import styled from "styled-components" interface Props ( initCount?: number ) const Counter: React.FC = (( initCount )) => ( const [count, setCount] = React.useState(initCount || 0) const increase = () => setCount(prev => prev + 1) const decrease = () => setCount(prev => prev - 1) return ( (count) ) ) export default Counter const Container = styled.div` display: flex align-items: center padding: 20px border: 2px solid coral max-width: 400px border-radius: 4px justify-content: center ` const Button = styled.button` width: 80px height: 40px text-align: center ` const Label = styled.p` font-size: 50px margin: 0 20px ` cypress에서는 css tag, class 등을 지정하여 요소를 선택할 수있습니다. 하지만 이는 cypress에서도 권장하지 않는 방법이며 대신 cypress가 명시하고있는 셀렉터를사용합니다. 참고: https://docs.cypress.io/api/commands/get#Get-vs-Find 참고: https://docs.cypress.io/guides/references/best-practices#Organizing-Tests-Logging-In-Controlling-State data-cy data-test data-testid 이 세가지 셀렉터를 사용하면 됩니다. 우선순위는 위에서부터 아래로적용됩니다. data-cy가 가장 우선순위가높습니다. (count) 위 파일의 해당 부분을 보면 테스트를 해야하는 부분에 data-cy를 지정해주었습니다. Test 작성 이제 테스트 코드를 작성해줍니다. /// describe("카운터 test", () => ( it("홈페이지 방문", () => ( cy.visit("localhost:3000") )) it("increase button click", () => ( cy.get("[data-cy=countvalue]").should("have.text", 0) const increaseButton = cy.get("[data-cy=increase]") increaseButton.click() cy.get("[data-cy=countvalue]").should("have.text", 1) )) it("decrease button click", () => ( cy.get("[data-cy=countvalue]").should("have.text", 1) const decreaseButton = cy.get("[data-cy=decrease]") decreaseButton.click() cy.get("[data-cy=countvalue]").should("have.text", 0) )) ))/// describe("카운터 test", () => ( it("홈페이지 방문", () => ( cy.visit("localhost:3000") )) it("increase button click", () => ( cy.get("[data-cy=countvalue]").should("have.text", 0) const increaseButton = cy.get("[data-cy=increase]") increaseButton.click() cy.get("[data-cy=countvalue]").should("have.text", 1) )) it("decrease button click", () => ( cy.get("[data-cy=countvalue]").should("have.text", 1) const decreaseButton = cy.get("[data-cy=decrease]") decreaseButton.click() cy.get("[data-cy=countvalue]").should("have.text", 0) )) )) 부분을 살펴보면 it("increase button click", () => ( // 버튼 클릭 전 data-cy가 countvalue인 요소의 text가 0이어야 한다. cy.get("[data-cy=countvalue]").should("have.text", 0) // increaseButton변수에 data-cy가 increase인 요소를 담는다. const increaseButton = cy.get("[data-cy=increase]") // increaseButton을 클릭한다. increaseButton.click() // 버튼 클릭 전 data-cy가 countvalue인 요소의 text가 1이어야 한다. cy.get("[data-cy=countvalue]").should("have.text", 1) ) 이렇게 테스트 코드를작성합니다. 참고:https://docs.cypress.io/api/table-of-contents Test 실행 cypress를 실행하면 해당 화면이나옵니다. 우측의 Run intergration spec을 클릭하면 테스트가시작됩니다. 테스트가 시작되면 intergration폴더에 있는 파일들을 테스트 하게됩니다. 제가 작성한 코드대로 클릭이 이루어지고 값들이test됩니다. 스택을 추적하여 변경되는 부분을 디버깅하기 쉽게되어있습니다. 이것으로 Cypress test를 간단하게 해봤습니다. 워낙 제공하는 API가 많고 케이스별로 코드 작성하는 노하우를 많이 필요로 할 것같습니다. 저는 브라우저 동작을 Cypress E2E테스트로 커버하고 Jest 단위 테스트로 로직을 테스트하는 형태를 생각하고 있습니다.모든 단위 테스트를 작성하는 것은 비용이 많이 들기 때문에 어떤 형태로 할지는 아직고민중입니다. 다음에는 Jest로 단위테스트를해보겠습니다! E2E Test를 Cypress로 해보자. was originally published in GreenDataKR on Medium, where people are continuing the conversation by highlighting and responding to this story.

E2E Test를 Cypress로 해보자.

댓글 0개