본문 바로가기

CodeSoom- React 13기

[코드숨] 리액트 13기 -3강/React-Testing(과제 1: To-do 테스트 작성하기)관련 참고사이트

Behavior Driven Development(BDD)

BDD는 테스트(test), 문서(documentation), 예시(example)를 한데 모아놓은 개념

 

describe("pow", function() {

  it("주어진 숫자의 n 제곱", function() {
    assert.equal(pow(2, 3), 8);
  });

});

 

스펙은 세 가지 주요 구성 요소로 이루어진다.

 

describe("title", function() { ... })

구현하고자 하는 기능에 대한 설명이 들어간다.

예시에선 함수 pow가 어떤 동작을 하는지에 대한 설명이 들어감. it 블록을 한데 모아주는 역할도 함

 

it("유스 케이스 설명", function() { ... })

it의 첫 번째 인수엔 특정 유스 케이스에 대한 설명이 들어간다.

이 설명은 누구나 읽을 수 있고 이해할 수 있는 자연어로 적어준다. 두 번째 인수엔 유스 케이스 테스트 함수가 들어감

 

assert.equal(value1, value2)

기능을 제대로 구현했다면 it 블록 내의 코드 assert.equal(value1, value2)이 에러 없이 실행된다.

함수 assert.*는 pow가 예상한 대로 동작하는지 확인해준다. 위 예시에선 assert.equal이 사용되었는데, 이 함수는 인수끼리 동등 비교했을 때 다르다고 판단되면 에러를 반환한다. 예시에선 pow(2, 3)의 결괏값과 8을 비교

BDD에선 스펙을 먼저 작성하고 난 후에 구현을 시작한다. 구현이 종료된 시점에는 스펙과 코드 둘 다를 확보할 수 있다.

 

스펙의 용도는 세 가지이다.

  1. 테스트 – 함수가 의도하는 동작을 제대로 수행하고 있는지 보장함
  2. 문서 – 함수가 어떤 동작을 수행하고 있는지 설명해줌. describe와 it에 설명이 들어감
  3. 예시 – 실제 동작하는 예시를 이용해 함수를 어떻게 사용할 수 있는지 알려줌

Describe - Context - It 패턴

Describe, Context, It 세 단어가 핵심 키워드.

 

키워드설명

Describe 설명할 테스트 대상을 명시한다.
Context 테스트 대상이 놓인 상황을 설명한다.
It 테스트 대상의 행동을 설명한다.
  • 영어로 Context문을 작성할 때에는 반드시 with 또는 when으로 시작하도록 한다.
  • It 구문은 It returns true, It responses 404와 같이 심플하게 설명할수록 좋다.

 

키워드설명

Describe 테스트 대상이 되는 클래스, 메소드 이름을 명시한다.
Context 테스트할 메소드에 입력할 파라미터를 설명한다.
It 테스트 대상 메소드가 무엇을 리턴하는지 설명한다.

 

보통 다른 언어의 D-C-I 패턴을 지원하는 BDD 테스트 프레임워크에서는 다음과 같은 형태의 테스트 코드를 작성하게 된다.

Describe("Sum", func() {
  Context("With 300 and 200", func() {
    It("returns 500", func() {
      Expect(Sum(300, 200)).To(Equal(500))
    })
  })

  Context("With -300 and 200", func() {
    It("returns -100", func() {
      Expect(Sum(-300, 200)).To(Equal(-100))
    })
  })
})

 

한국어로 테스트 설명을 작성하기

한국어로 작성한다면 다음과 같은 간단한 기준을 따르면 될 것 같다.

  • Describe 테스트 대상을 명사로 작성한다.
  • Context ~인 경우, ~할 때, 만약 ~ 하다면 과 같이 상황 또는 조건을 기술한다.(주어진 상황이 달라질 때를 명시할 때)
    •  보통 context는 1) 할일이 없다면, 2)할일이 있다면, 이런식으로 주어진 상황이 달라질 때 사용
  • It은 위에서 명사로 작성한 테스트 대상의 행동을 작성한다.(그래서 어떤 결과가 나오는지를 명시)
    • 테스트 대상의 행동은 ~이다, ~한다, ~를 갖는다가 적절한다.
    • ~된다 같은 수동형 표현은 좋지 않다.

즉, BDD가 테스트 대상의 행동을 묘사하는 방식이라는 것을 염두에 두고 작성하면 된다.

 


 

 

 

 

 


참고 사이트

추천해주신 테스트 리뷰 링크

https://github.com/CodeSoom/react-week3-assignment-1/pull/134

 

코드숨3주차 과제 (6월 24일) by Jongveloper · Pull Request #134 · CodeSoom/react-week3-assignment-1

트레이너님 안녕하세요! 과제를 전부 완성하진 못하고 부족한 코드지만 리뷰요청드립니다! Input 컴포넌트를 테스트 했습니다. Input이 렌더링 되는지 확인하는 테스트코드를 추가하였습니다. Inpu

github.com

https://github.com/CodeSoom/react-week3-assignment-1/pull/138#pullrequestreview-1015192093

 

To-do 테스트 작성하기 by 2scent · Pull Request #138 · CodeSoom/react-week3-assignment-1

안녕하세요. 3주 차 과제 To-do 테스트 작성하기 리뷰 요청드립니다. 우선은 Input 컴포넌트 테스트만 작성해 봤는데요. 다른 컴포넌트도 시도는 해봤는데 Input 컴포넌트와 달리 컴포넌트 안에 컴포

github.com


추천해주신 관련 링크

https://johngrib.github.io/wiki/junit5-nested/#describe---context---it-%ED%8C%A8%ED%84%B4

 

JUnit5로 계층 구조의 테스트 코드 작성하기

5의 @Nested 어노테이션을 쓰면 된다

johngrib.github.io

https://marocchino.net/2016/12/04/about-rspec/

 

rspec 잘쓰고 계신가요?

이 글은 루비 대림 달력용으로 작성하는 글 입니다. tl;dr: Given, When, Then 단위로 나누어서 작성하세요. rspec은 설명할 것도 없이 레일스를 사용한다면 한번은 봤을 법한 가장 대중적인 BDD테스트 프

marocchino.net

https://ko.javascript.info/testing-mocha#ref-888

 

테스트 자동화와 Mocha

 

ko.javascript.info

https://github.com/ahastudio/til/blob/main/ruby/20161206-rspec-let.md

 

GitHub - ahastudio/til: Today I Learned

Today I Learned. Contribute to ahastudio/til development by creating an account on GitHub.

github.com

https://www.youtube.com/watch?v=gfTsSBRvdqI 

 


+ 관련 사이트

https://www.youtube.com/watch?v=L1dtkLeIz-M 

 

https://learn-react-test.vlpt.us/#/06-rtl-tdd

 

벨로퍼트와 함께하는 리액트 테스팅

 

learn-react-test.vlpt.us