[React] Jest를 사용해보자.

[Study] TDD란 무엇일까?

[Study] TDD란 무엇일까?

TDD에 대해 알아보았으니, 이제 Jest를 사용해보자.

Jest?

테스트 코드가 중요하다는 것은 이전 글에서 확인했으니

이제 JavaScript 테스트 프레임워크 중 하나인 Jest로 테스트를 진행해보려 한다.

 

Jest는 React 이외에 typeScript, Angular, Vue, Node 등도 테스트가 가능하다.

 

Zero config

테스트 전 설정할 것이 많은 다른 프레임워크의 문제점을 해결하고자, 제로 설정으로 설정 없이 바로 사용할 수 있다.

 

Snapshots

Jest는 스냅샷 기능을 제공한다. 

스냅샷을 통해 큰 오브젝트를 저장한 후, 추후 코드 변경에 의해 오브젝트가 변경되면 에러를 표시하도록 하고 있다.

리액트에서는 화면에 렌더링된 리액트 컴포넌트의 변경 사항을 체크한다.

 

Isolated

Jest에서 테스트 코드는 완전히 분리되어 있다.

즉, 서로에게 영향을 주지 않으므로 동시에 테스트가 가능하다. 동시 테스트는 전체 테스트 시간을 단축하여 성능을 높인다.

 

Great API

Jest에서 제공하는 API는 단순하다.

 

이 외의 정보는 jestjs.io에서 확인할 수 있다.

Test

나는 js로 테스트를 해보았다. 지금은 개발중인 프로젝트가 따로 없어서 테스트용 프로젝트를 만들었다.

 

[sum.js]

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

module.exports = sum;

 

[sum.test.js]

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
})

 

[결과]

---

음.. 일단 테스트는 이렇게 한다-라는 걸 찍먹 해봤다.

한번도 해보지 않은 과정이라 그런지, 아직은 왜 TDD가 중요한지 몸소 느끼지 못하고 있다.

 

하나하나 테스트 케이스를 모두 작성해서 개발을 하면 오류도 줄고, 유지보수 비용도 확실히 줄 것이라는 생각은 들지만

...어렵다!