연관 내용
[Jest]
[react 초기세팅]
애플리케이션이 요구사항에 맞게 동작하는지 검증하는 행위
실행 속도가 빨라야 한다.
내부 구현 변경 시 실패하지 않아야 한다.
리팩토링할 때 테스트가 깨진다면 오히려 코드 개선을 방해한다.
버그를 검출할 수 있어야 한다.
테스트의 결과가 안정적이어야 한다.
외부환경의 영향을 최소화해서 동일한 결과를 최대한 보장해야 한다.
의도가 명확히 드러나야 한다.
테스트 코드를 보고 한 눈에 어떤 내용을 테스트하는지 파악할 수 있어야 한다.
테스트할 프로젝트의 터미널에서 설치 명령어 입력
yarn add cypress --dev
cypress 실행 명령어 입력
./node_modules/.bin/cypress open
2 명령어를 입력하고 기다리면 cypress를 실행시킬 수 있는 창이 뜬다.
test 샘플을 볼 수 있다.
todo.spec.js
클릭테스트가 이루어지는 모습을 볼 수 있는 창이 열린다.
선택한 테스트 샘플은 자동으로 integration
에 담긴다.
integration
이 디렉토리에 테스트코드 파일을 작성하면 cypress 테스트하는 창에서 작성한 테스트코드 파일이 보여진다.
cypress > integration 안에 counter.spec.js
파일 생성
(spec : 제품의 사양 specification)
describe("테스트 이름", ()=>{
beforeEach(()=>{
cy.visit("테스트할 페이지 경로")
})
it("테스트할 내용", ()=>{
테스트 코드
})
})
(첫번째 인자의 내용을 두번째 인자를 기준으로 체크한다.)
.then
을 사용한다.
invoke("text")
로 가져온 값은 String인 것에 주의하자!!
cy.get("#value").invoke("text").then(value=>{
const preValue = Number(value)
cy.get(".increase-btn").click();
cy.get("#value").invoke("text").should("eq",String(preValue+1))
})