TDD(Test Driven Development) - Front End(2)

 

TDD의 프로세스

이론은 알겠는데 어떻게 쓰는지도 알아보겟습니다.
Jest
 
참고로 직접 실행은 해보지 못하고 정보 전달만 하는 겁니다..!
직접 사용은 기회가 된다면 다음 글에서..!! 
 

---

Front End의 TDD - React.js

테스트 실행 도구 없이도 TDD를 진행할 수야 있지만...

Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS Applications

 
JavaScript에도 테스트 실행 도구들이 있다. 
Mocha, Jest
Tape, Jasmine ... 등등..
 

Jest 사용법

1. Node, npm 버전이 각각 10.16(이상) 및 5.6(이상) 이어야 한다. Yarn은 0.25이상
2. 프로젝트 디렉터리를 생성하고, 해당 폴더로 이동한다. mkdir, cd
3. package.json파일을 만들고 초기화 한다. 

npm init -y
//혹은
yarn init -y

4. Jest 설치

npm install jest --save-dev

yarn add jest --dev

5. Jest를 프로젝트의 테스트 실행 도구로 만든다
파일을 열어 필드 package.json에 Jest를 추가. test.

{
  "scripts":{
    "test":"jest"
  }
}

 
6. 프로젝트 파일을 만들고 테스트 파일도 만든다. 
Jest가 테스트 코드를 포함하는 파일로 인식하도록 .test.js로 끝내야 한다.

touch additinCalculator.js
touch additionCalculator.test.js

 
7. 테스트 케이스를 작성한다.

//additionCalculator.test.js

const additionCalculator = require("./additionCalculator");

test("addition of 4 and 6 to equal 10", ()=>{
  expect(additionCalculator(4,6)).toBe(10);
})

 
8. 이제 테스트 케이스를 작성했으니(RED) 개발을 한다(blue)

// additionCalculator.js

function additionCalculator(a, b) {
  return a + b;
}

module.exports = additionCalculator;

 
9. 테스트 실행

npm run test
yarn test

// 프로젝트에 여러 테스트 파일이 포함되어 있고 특정 파일을 실행하려 한다면, 
// 다음과 같이 test 파일 지정
npm run test additionCalculator.test.js
yarn test additionalCalculator.test.js

/* 실행
$ jest
 PASS  ./additionCalculator.test.js
  √ addition of 4 and 6 to equal 10 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.002 s
Ran all test suites.
Done in 7.80s.
*/

 
Jest가 테스트를 자동으로 실행하게 하려면 package.json의 test 필드에  --watchAll 옵션을 추가한다. 

{
  "scripts": {
    "test": "jest --watchAll"
  }
}

이제, 변경 사항을 저장할 때마다 Jest가 자동으로 테스트를 다시 실행하기 시작한다. 
 
10. 리팩토링 
프로그램이 의도대로 작동한다면 테스트 코드의 리팩터링이 필요한지 확인해라 .
ex) additional Calculator에 사용자가 원하는 만큼 숫자를 추가할 수 있어야 한다. 

// describe() 두가지 인수를 허용한다
// 1. 테스트 사례 ㅔ그룹을 호출하려는 이름(예:)
// 2. 테스트 사례가 포함된 함수
describe("additionCalculator's test cases", () => { 
  test("addition of 100, 50, 20, 45 and 30 to equal 245", () => {
    expect(additionCalculator(100, 50, 20, 45, 30)).toBe(245);
  });
 });

 

//변경~

// additionCalculator.js

function additionCalculator(...numbers) {
  return numbers.reduce((sum, item) => sum + item, 0);
}

module.exports = additionCalculator;

 

Jest와 ES6 모듈을 쓸 때 주의할 점

Jest는 현재 ES6 모듈을 인식하지 못한다. << 블로그 글이 2022에 써졌길래 혹시 지금이라면? 하는 괜한 기대를 안고 공식문서를 찾아봤는데 여전히 오류가 있는 듯 합니다. 하지만 완전 지원하지 않는 것은 아니라고!! 오류가 있을 수 있다고 함 ㅋ;;;;
영문잘 해석 못하겠지만 아마 node 18.8.0에서만 작동하는듯

ECMAScript Modules · Jest

찾아보니까 이런 트러블 슈팅글도 있네요 2021년 이지만..? 
 
Babel로 하거나 ESM을 CJS처럼 속일 수 있는 것 같습니다. ( 나중에 ESM, CJS 둘의 차이도 한 번 찾아봐야 겠음 import require 차이 었던거 같은데.... 다 왤케 대충 알지 ) 
 

E2E 테스트

End-to-End 테스트는 사용자 인터페이스의 기능을 평가하는 테스트. 즉, 사용자 인터페이스가 의도대로 작동하는가? 를 확인한다. 
End-to-End
 
외에도 엄청 많은데... 여기서 확인해주세요. 다 설명하긴 불가능
 

React component 테스트

React component  테스트를 위해선 두 가지가 필요합니다. 
1. 테스트 실행 도구 
2. React component 테스트 도구
 
둘의 차이점이 정확히 뭔지 아시겠나요..? 전 모름. 
 
1. 테스트 실행 도구 (Test runner tool)
개발자가 test script를 실행하고 CLI(Command Line Interface) 에서 결과를 출력하는 도구입니다. 9번 테스트 실행에서 기억나시나요?

/* 실행
$ jest
 PASS  ./additionCalculator.test.js
  √ addition of 4 and 6 to equal 10 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.002 s
Ran all test suites.
Done in 7.80s.
*/

네, "테스트 실행 도구"에 해당하는 녀석들이 Jest, Mocha, Jasmine, Tape 등입니다. 
 
2. React component 테스트 도구?
얘는 APIs를 제공한다. component의 테스트 케이스를 정의하기 편리하도록.
 
예를들어, <App />이라는 컴포넌트를 테스트 하고 싶을 때 사용하는 것이 React component testing tool.
React component testing tool은 테스트 케이스를 작성에 도움이 되는 API를 제공
 
Enzyme, React Testing Library등이 있다구 함. 얘넨 진짜 처음 보네.. 모카나 Jest는 들어 봣는데...
 
흠.. 이번은 여기서 끝내고, 다음엔 간단한 프로젝트로 실행시켜 보자! 
 
 
https://www.freecodecamp.org/news/test-driven-development-tutorial-how-to-test-javascript-and-reactjs-app/#what-is-test-driven-development

Test-Driven Development Tutorial – How to Test Your JavaScript and ReactJS Applications

https://jestjs.io/

Jest

https://mochajs.org/

Mocha - the fun, simple, flexible JavaScript test framework

https://testing-library.com/docs/react-testing-library/intro/

React Testing Library | Testing Library