E2E 테스트는 각종 레이어들이 잘 어우러져 동작하는지 테스트한다.
실제로 우리가 웹에서 테스트하는 과정을 자동화한다.
조금 기다리니까 프로그램이 열린다.
cypress 디렉터리를 tree로 펼쳐본다.
열어보니 리팩터링 2판에서 본 fixture가 있다.
기본 테스트 코드를 생성해준다. 이게 스토리북에서 Button 샘플을 만들어준 것과 비슷하다고 느껴진다.
integration은 테스트코드 관리
fixtures는 더미데이터를 관리
그래서 integration은 다 지워버리고 todo/todo.spec.js를 추가한다.
/*eslint no-undef: "off"*/
/// <reference types="cypress" />
describe("Todo", () => {
beforeEach(() => {
cy.visit("/");
});
it("should add a todo", () => {
cy.get("[data-test=todo-input]").type("Learn Cypress");
cy.get("[data-test=todo-input]").type("{enter}");
cy.get("[data-test=todo-input]").type("have.value", "");
cy.get("[data-test=todo-item]").type("have.length", 1);
cy.get("[data-test=todo-input]").type("hello hello");
cy.get("[data-test=todo-input]").type("{enter}");
cy.get("[data-test=todo-input]").type("have.value", "");
cy.get("[data-test=todo-item]").type("have.length", 2);
});
it("should cancel a todo", () => {
cy.get("[data-test=todo-input]").type("Learn Cypress");
cy.get("[data-test=todo-input]").type("{enter}");
cy.get("[data-test=todo-input]").type("hello world");
cy.get("[data-test=todo-input]").type("{enter}");
cy.get("[data-test=todo-item]").should("have.length", 2);
cy.get("[data-test=todo-cancel]").last().click();
cy.get("[data-test=todo-item]").type("have.length", 1);
});
});
TypeScript
복사
눌러봤더니 실행되고 CypressError가 발생한다.
이유는 사이트 접속 후 테스트를 실행하기 때문에 프로젝트 run이 필요하기 때문이다.
npm start
TypeScript
복사
그래도 에러가 난다. cypress의 baseURL 설정이 필요하다.
재실행해도 에러가 난다. 왜냐하면 axios 목킹이 안되어있기 때문이다.
에러메시지만 봐도 추측이 가능하다.
새롭게 intercept라는 함수를 사용했다.
GET 메서드에 대해, /todos 경로에 대해, { todos: TEMP_TODOS }라는 응답을 보내주는듯
intercept는 method, path, response 순으로 전달하여 목킹할 수 있다.
cy.server()와 cy.router()는 deprecated되어 이로 대체한다.
항목 추가 테스트
get에는 CSS selector가 들어갈 수 있다.
type은 선택된 DOM에 값을 입력한다. (typing해준다는 의미인듯)
should는 검사해주는 것이다.
have.value : 값 검사
have.length : 갯수 검사
이제 실제 코드에 테스트를 위해 셀렉터를 추가한다.
항목 삭제 테스트
초기 목킹 데이터 3 + 2개의 Todo를 입력해
마지막 아이템을 삭제해 4개의 아이템이 남아있는지 테스트한다.
useTodo 커스텀한 게 있다.
getTodo를 클래스로 묶어서 사용한다.
디스트럭쳐링 방식으로 반환값을 받는 것을 설명한 건가?
todoApi를 전달하는 방식은 의존성을 분리해줘서 테스트가 수월해진다.
테스트가 잘 작동한다.
내가 따라친 코드는 에러가 발생했다.
작성자분 깃헙 코드에서 어디서 틀렸는지 보자.
더미 데이터를 import 해와서 사용하지 말자.
