출처 : 코드숨 리액트 9기 코드리뷰 (다희님과 인서님)

BDD 스타일(describe -context-it)

무엇을 테스트 할 것인가 1번을 위해 어떻게 테스트코드를 작성할 것인가

‘컴포넌트한테 무엇을 기대하는지’에 대해 고민하며 테스트 케이스를 작성하는 편

Describe - Context - It는 테스트를 구조화 하기위한 패턴

Given - When - Then은 테스트 시나리오를 BDD 형식으로 작성할 때 도움이 되는 패턴

Given - When - Then 을 이용해서 시나리오를 구성

Describe - Context - It를 이용해서 테스트 코드를 구조화

  • Describe는 테스트의 대상을,
  • Context는 주어진 상황이 달라질 때를 명시할 때
  • It는 그래서 어떤 결과가 나오는지를 명시합니다.

image

image

image


보통 context는 1) 할일이 없다면, 2)할일이 있다면, 이런식으로 주어진 상황이 달라질 때 쓴다. context 는 상반되는 상황에서 맥락을 분기할 때 사용하는것이 좋아요.


mock 함수를 사용하고 초기화해주지 않으면 다른 테스트 케이스에도 영향을 줄 수 있기 때문에 mock 함수를 정리해주는것이 좋아요.

beforeEach 와 mock clear 를 찾아서 적용해보세요!

jest.clearAllMocks();

테스트가 끝나고 clear를 하면 테스트가 실패하는 경우 제대로 초기화되지 않을 수 있어요! beforeEach 안에서 초기화해주세


전 getByText를 사용했을 때 element가 명시적으로 더 잘 드러나는 것 같아서 getByText를 선호하는 편이에요. element의 구조적인 역할에 조금 더 집중하고 싶다면 getByRole을 사용하셔도 될 것 같아요


image

it문 마다 render를 해줘야한다.

it은 독립적으로 실행되는 테스트에요. 따라서 render 함수를 it 내부에서 각각 실행해주셔야 올바르게 테스트가 진행이돼


어느 곳에서는 get를 사용하셨고 어느 곳에서는 query 사용하셨는데, 혹시 이 둘의 차이점에 대해 알고 계신가요? 언제 get을 사용하는게 좋은지, 언제 query를 사용해야 하는지 공부

참고 : https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-query-variants-for-anything-except-checking-for-non-existence


여러 곳에서 사용되는 tasks 데스트용 데이터를 보통 fixture라고 이야기합니다. 저는 이러한 데이터를 fixtures 폴더 하나 만들어서 따로 관리하는 편이예요!

https://marocchino.net/2016/12/04/about-rspec/ https://ko.javascript.info/testing-mocha#ref-888 https://github.com/ahastudio/til/blob/main/ruby/20161206-rspec-let.md Ginkgo - Go 언어 개발자를 위한 BDD 테스팅 프레임워크

https://ko.javascript.info/testing-mocha

https://testing-library.com/docs/react-testing-library/api#cleanup

기본적인 테스트 코드 작성하기

mocking이란