테스트 전략 - connect-foundation/2019-12 GitHub Wiki

공통

  • feature 에는 테스트가 꼭 포함된다.
  • 함수 단위 테스트를 작성하며 한 함수에 대해 여러 테스트가 작성될 수 있다.
  • describe : Suit, 테스트 대상이 되는 파일/모듈/컴포넌트 단위로 한다.
  • it : Test, Suit에 작성된 함수/이벤트/테스크 단위로 한다.
  • jest, cypress 사용 시 regex를 적극 활용해서 시간을 절약하자 (파일 이름 또는 테스트 이름을 정규표현식으로 이용, ex. npm run test "regex string")
  • give, when, then 패턴을 작성한다.
// frontend - component example
describe("App", () => {
  it("Welcome가 상단에 노출된다", () => {
    const { queryByText } = render(<App />);
    expect(queryByText("welcome")).toBeInTheDocument();
  });

  it("button을 click하면 새로운 데이터가 노출된다", () => {
    const { getByText } = render(<App />);
    fireEvent.click(getByText("loading data"));
    const newContent = getByText("newdata");
  });
});

// backend - model example
describe("Model - User", () => {
  it("모든 사용자를 조회한다.", async () => {
     // given : 데이터는 Test DB에 이미 등록되어 있음
     const exclude = ["id", "password", "created_at", "updated_at"];

     // when
     const responseData = await user.findAll({
        attributes: { exclude }
     });

     // then
     expect(responseData.length).toBeTruthy();
  });
);

Frontend

Flow

  1. (Jest, Enzyme) 컴포넌트 단위/통합 테스트
  2. Storybook
    1. 개발 중인 컴포넌트에 대한 시각적 결과를 즉각적인 확인 (개발자가 직접 결과를 확인하는 테스트)
    2. Cypress를 이용하여 Storybook에서 각 컴포넌트에 대한 E2E 테스트
  3. (Cypress) 프론트에 국한되어 백엔드 API를 Mocking하여 E2E 테스트
  4. (Cypress) 실제 리액트 프로젝트에서 E2E 테스트

Step (About branch)

  • feature => client-dev (1, 2-i)
  • client-dev => client-master (2-ii, 3)

Convention

  • 단위 테스트
    • 기본적으로 State 변경을 테스트한다.

Backend

Flow

  1. (Jest, Supertest) API 단위/통합 테스트
  2. (Ngrinder, Artillery) Stress 테스트

Step (About branch)

  • feature => server-dev (1)
  • server-dev => server-master (1)
  • master (2)
⚠️ **GitHub.com Fallback** ⚠️