테스트에 관하여

테스트란?

소프트웨어를 개발하고나면 우리가 만든 소프트웨어를 테스트 하는 절차가 반드시 필요합니다. 테스트는 사람에 의해 수동으로 진행되기도 하고 개발자가 작성한 테스트 코드에 의해서 작성되기도 합니다.
테스트는 소프트웨어가 요구사항대로 정상적으로 돌아가는지 확인하는 절차로 정의할 수가 있습니다.

테스트 종류

유닛 테스트 (Unit Test)

개별 컴포넌트가 기대한대로 동작하는지 확인하는 테스트입니다. 테스트하려는 대상 컴포넌트에 대해서만 테스트를 진행하고 컴포넌트가 참조하는 다른 컴포넌트나 함수는 mock을 통해 가짜 객체나 가짜 함수로 대체 합니다. Page컴포넌트,Input컴포넌트가 있다면 각각 개별 컴포넌트를 테스트하는행위 입니다.

통합 테스트 (End to End Test)

통합 테스트는 사용자 입장에서 시스템이 제공하는 기능이 올바르게 동작하는지 확인하는 테스트 입니다. 통합 테스트를 수행하기 위해서는 모든 컴포넌트간의 구성 요소들간에 유기적으로 잘 연결되서 요구사항이 잘 동작하는지 확인하는 절차입니다. App컴포넌트,Page컴포넌트,Input컴포넌트가 있다면 App컴포넌트를 구성하는 Page컴포넌트,Input컴포넌트가 통합되었을때 모든 요구사항이 정상적으로 동작하는지 확인하는 테스트 입니다.

테스트 코드의 구성 요소

• 테스트 코드는 3가지 구성요소로 결합되면 좋습니다.
  - 상황,실행,결과 확인
• 어떤 상황이 주어지고 그 상황에서 기능을 실행하고 실행한 결과를 확인하는 구조가 기본 골격 입니다.
• 테스트를 해보려면 결국 내가 테스트 하려는 대상이 어떤 기능이 구현되어 있는지 알아야 하고 어떤 결과값이 나와야하는지 파악하고 있어야 테스트 코드를 작성할 수 있습니다.
• 우리는 소프트웨어를 개발하기 전에 기획자의 기획서로부터 요구사항을 추출하는데 추출된 요구사항이 결국 테스트 해야하는 내용 입니다.
• 즉, 요구사항을 철저하게 분석하면 내가 작성해야하는 테스트코드가 어떤 내용을 담아야하는지 파악할 수 있습니다.

//given (상황)
테스트를 진행하기 위한 어떤 상황이나 데이터를 준비

//when (실행)
테스트를 실헹

//then (결과확인)
실행한 테스트의 결과를 확인

Todo컴포넌트를 테스트한다고 가정해보면

describe("Todo컴포넌트 관련 테스트", () => {

	it("할일 목록에 할일이 추가되어있지 않으면 추가된 할일이 없습니다가 화면에 보인다.", ()=> {
    
    	//given when
        Todo컴포넌트를 생성한다.
   
    
        //then
        Todo컴포넌트가 그려지고나서 할일이 없습니다라는 문자열이 있는지 확인한다.
    })


})

테스트를 도와주는 도구

Jest

프론트 엔드 환경에서 사용하는 테스트 라이브러리나 프레임워크에는 여러가지가 있습니다. 대표적으로 Jest를 많이 사용합니다. Jest를 이용해서 테스트할 경우 아래와 같이 2가지 골격으로 작성이 가능합니다,

Jest 기본 골격

test("테스트 설명", ()=> {
	expect("검증 대상").toXXX("기대 결과");
}

describe("테스트 설명", ()=> {
  
  it("구체적인 테스트 설명1,() => {
     expect("검증 대상").toXXX("기대 결과");
  });

  it("구체적인 테스트 설명2,() => {
     expect("검증 대상").toXXX("기대 결과");
  });

}

Matcher

Matcher란 테스트를 진행하고 결과값이 잘 나왔는지 확인할때 사용하는 일종의 문법입니다. 기본적인 Matcher에는 toBe()가 있지만 코드 자체로도 어떤 테스트인지 명확하게 확인하기 위해서 더 풍무한 표현의 Matcher가 있습니다. 간단하게 자주사용되는 Matcher를 알아보겠습니다.

toEqual()

테스트하려는 함수의 반환값이나 최종 데이터의 결과값이 기대하는 값과 일치하는지 확인하는 Matcher입니다.

test("id값으로 사용자를 조회한다", () => {
  expect(getUser(1)).toEqual({
    id: 1,
    email: `user1@test.com`,
  });
});

toBeTruthy(), toBeFalsy()

테스트하려는 함수의 반환값이나 최종 데이터의 결과값이 true인지 false인지 확인하는 Matcher입니다.

test("isAdult()함수는 나이가 20세 이상이면 true를 반환한다.", () => {
  //given
  const person = {
  	name : "홍길동",
    age : 18
  }
  //when
  const result = isAdult(person);
  //then
  expect(result).toBeTruthy();
});

toHaveLength(), toContain()

배열의 길이나 특정 원소가 배열에 존재하는지 확인할때 사용하는 Matcher 입니다.

test("할일목록에 할일을 2개 추가하였으면 tasks의 길이는 2이다.", () => {
  //given when
  const tasks = [{id : 1, task : "할일1"},{id : 2, task : "할일2"}];
  //then
  expect(tasks).toHaveLength(2);
  expect(tasks).toContain({id : 2, task : "할일2"});
});