20220303_TIL : Jest , Cypress

배포 이후 서비스 진행 단계에서 추가 기능을 구현했을 때 기존 기능과 충돌은 없는 지 확인하기 위해 코드에 변화가 있을 때마다, 직접 브라우저에 들어가 모든 기능을 전부 체크할 수 없기 때문에 테스트코드가 필요하다.

테스트를 위한 프레임워크/ 라이브러리를 이용했는데,

• 개별 기능을 테스트하는 단위테스트 : jest
  큰 단위 - describe("테스트명", () => { })
  작은 단위 - it, test("테스트명", () => { })
  기대값 - export().toBe()

// 테스트 할 파일 import 
import { add } from "../../pages/34-01-jest";

it("더하기 테스트", () => {
  const result = add(3, 5);

  expect(result).toBe(8); //예상되는 결과값
});

모든 코드의 기능을 다 적어서 테스트 할 수 없기 때문에 컴포넌트 전체를 확인하는 snapshot 방식

it("기존 컴포넌트와 비교 - snapshot", () => {
  const result = render(<JestUnitTestPage />);
                        // 비교 대상

  expect(result.container).toMatchSnapshot();
  // 만들어 둔 snapshot 없으면 생성, 있다면 비교
});

• 특정 루트 혹은 시나리오가 있는 E2E / 통합 테스트 : cypress

yarn cypress 를 통해 cypress를 열어준 후, 또 다른 터미널으로 yarn cypress:run 명령어를 실행해 cypress를 실행

it("cypress 테스트", () => {
  cy.visit("http:// - 테스트로 체크할 파일 주소");
  cy.get(".aaaa - 체크할 파일 태그").click();
  cy.get("div").contains("철수야 놀자 : 체크할 텍스트");
});

테스트를 위해 yarn dev로 서버를 실행시켜주어야한다.

👉🏻 jest , cypress 충돌 방지를 위해 jest.config.js 파일에
testPathIgnorePatterns: ["<rootDir>/cypress/"] 작성