test code의 기본구조 및 종류

jest와 vitest의 구문은 완전히 똑같으나, setup만 약간 다를 뿐이라고 한다.

Vitest 기반 강의를 들으며 내용을 정리해보려 한다.

 

기본 구조

- 브라우저에서 프로젝트를 실행시키지 않아도, 가상DOM 상에서 테스트를 진행할 수 있다.

- Jest 또는 Vitest에서 matcher를 사용하려면 테스트 전에 가져와야 한다.

- test code 구문은 expect 구문과 matcher 구문으로 구성되어 있다.

 

 

- linkElement는 이전 줄에서 정의한 어떤 요소다.

- matcher 구문에 올 수 있는 또 다른 예시로는 toBe("hello"), toHaveLength(7) 등이 있다.

 

 

 

1. Unit test

- 코드의 한 유닛 혹은 단위를 테스트

- 격리되어 있는 유닛을 독립적으로 테스트 (다른 코드의 유닛과 상호작용X)

- 사용자가 소프트웨어와 상호작용하는 것과는 무관할 수 있다(테스트는 통과하지만 사용자가 실패하거나, 사용자는 문제없지만 테스트는 실패할 수 있음)

- 같은 동작을 하지만 코드 작성방식을 바꾸는 refactoring이 진행된 경우, 원래는 성공하던 테스트에 실패할 가능성이 있다.

 

 

2. Integration test

- 유닛과 유닛 사이의 상호작용을 테스트 (컴포넌트 간, 마이크로서비스 간...)

 

 

3. Functional test

- 소프트웨어의 특정 기능을 테스트(ex. 인풋에 틀린값 입력하면 빨간 텍스트로 표시되는가)

- 유닛테스트와 비슷해 보일 수도 있지만, '코드'가 아닌 '동작'을 테스트한다는 것에 초점

- 유저 플로우와 연관된 모든 단위를 포함한다(유저의 사용방식과 밀접한 연관이 있다)

- 리팩토링 시에도 동작에 문제가 없다면 테스트는 성공한다(unit test와 반대)

- 하지만 테스트 실패 시, 발생 지점을 디버깅하기 힘들다는 단점도 있다.

 

 

4. End to End test

- 실제 브라우저 상에서 서버를 연결하여 cypress, selenium 등의 도구를 사용하여 진행하는 테스트

 

 

 

아래 사이트에서 query를 작성하는 데 필요한 요소들을 참고할 수 있다.

 

 

https://testing-library.com/docs/queries/about

About Queries | Testing Library