TDD, CleanCode (16) 썸네일형 리스트형 Next.js 와 Redux 테스트(Jest, Enzyme)를 해보자. ## 추가 2019.08.14 Enzyme 3.10.0 에서 컴포넌트 스냅샷이 안되는 경우가 발생하는데, shallow 혹은 mount한 컴포넌트에 .debug()를 추가해주면 정상적으로 스냅샷 된다. 이전 포스팅에서는 React의 컴포넌트들을 테스트 했다. NextJS 역시 테스팅에서의 방법은 다를 바 없는데, 대신 테스팅을 위해 몇가지 설정을 해줘야 하는 것이 있다. 또한 Redux 테스트에 대해서 알아보도록 하자. Next 테스트 보일러 플레이트 npx create-next-app --example with-jest project-name 사실 다음과 같이 설치 해주면 귀찮은 설정들이 모두 해결 된다. 손으로 설정하더라도 다음 프로젝트의 구조를 거희 따라가기 때문에, 만들어진 프로젝트 구조를 살펴보.. React 테스트 (Jest, Enzyme) Jest 자바스크립트 테스트 도구이다. 다음과 같이 설치하고 npm install --save-dev jest npm script를 통해 실행하자. { "scripts": { "test": "jest" } } expect(테스트 데이터).toBe(결과 값) 제일 기본이 되는 문법이다. expect의 파라미터에 테스트할 데이터, toBe에 결과값을 각각 입력한다. 1 2 3 4 5 6 7 8 9 10 const sum = require("./sum") test("1+2는 3입니다.", () => { expect(sum(1, 2)).toBe(3) }) test("2+2는 4입니다.", () => { expect(2 + 2).toBe(4) }) .toEqual(주로 객체 데이터) 객체를 비교 할 때 사용된다... 클린코더스 강의 리뷰 5. TDD 예제 (wordWrap) 1. getting stuck. 다음 테스트를 보자. public class WrapperTest { @Test public void should_wrap() { assertThat(wrap("word word",4),is("word\nword")); } private String wrap(String s, int length) { return null; } } wrap 은 length를 받아 받은 문자열을 length만큼 자르고 나머지는 다음줄에 표현한다. 이 경우에는 replaceAll을 이용하여 문제를 해결 할 수 있다. private String wrap(String s, int length) { return s.replaceAll(" ","\n"); } 다른 failing test를 추가하자 a.. 클린코더스 강의 리뷰 5. TDD 예제 (Prime factors) 1. 가장 쉬운 예제를 찾는다. 1-1 1로 소인수 분해를 했을 때의 얻는 값. public class PrimeFactorsTest { @Test public void canFactorIntoPrimes() { assertEquals(Arrays.asList(), of(1)); } private List of(int n) { return new ArrayList() ; } } assertEquals는 기대한 값이 앞에 , 실제 값이 뒤에 온다 assertEquals(예상값, 실제값) of 메소드는 테스트를 위해 만들었고, n의 소인수를 리스트로 반환한다. 1-2 헌데 예상값의 List는 Object를 실제값은 Integer를 반환한다. public class PrimeFactorsTest { @Test.. 클린코더스 강의 리뷰 5. TDD 예제 (Bowling Game) @Test public void perfectGame() { rollMany(10,10); game.roll(10); game.roll(10); assertThat(game.getScore(),is(300)); } 깃 주소 : https://github.com/jiwon3346/bowling-game Bowling Game 규칙은 다음과 같다. 규칙 1. 볼링 게임은 10개의 프레임으로 구성된다. 2. 각 프레임은 대게 2roll 을 가진다.(1개의 프레임에서 10개의 핀을 쓰러 뜨리기 위해 2번의 기회를 갖는다.) 3. Spare : 10 + next first roll에서 쓰러 뜨린 핀수. 4 . Strike : 10 + new two rolls에서 쓰러 뜨린 핀수. 5. 10번째 프레임은 spare.. 클린코더스 강의 리뷰 5. TDD의 기본 예시 TDD는 다음과 같은 주기로 작성할 수 있다. 1. Red - 일단 만들어야 하는 코드를 작성한다. 2. Green - 최대한 빨리 (수단과 방법을 가리지 않고) 테스트를 작동할 수 있게 한다. 3. Refactor - 리팩토링한다. 예시를 살펴보자 어떤 영화가 생성되고, 그 영화가 평점을 부여 받는다고 했을 때, 그 평점의 평균을 반환해야 하는 메소드를 만든다고 가정하자. 단계별로 나누면 1. 영화가 생성되고 2. 평점을 부여받고 3. 평점의 평균을 반환한다. 0. 일단 제대로 Test클래스가 생성 됬는지 확인 뭐 이런거 까지 해야 하나 싶은데, 그런게 TDD 아닐까 싶기도 하다. ㅋㅋ 1. 객체를 생성한다(영화를 생성한다) 객체 생성과 같이 간단한 코드는 리팩토링 할 것이 없다. 이런 경우는 Refa.. 클린코더스 강의 리뷰 4. Forms 1. 코멘트 작성 요령 1) 남발 하지 마라. 가능한 사용하지 마라. 의미 없는 코드는 우리를 양치기 소년으로 만든다고 한다. 정말 필요할 때만 사용하여서, 코멘트를 가치있게 만들자. 2) 이럴 때는 사용할 수 있다. 법률적인 문제에 대한 코멘트 정규표현식과 같은 포멧에 대한 알림 TODO 코멘트 3) 이럴 때는 사용을 자제하라 정보의 중복을 피하라 위의 chhildren의 경우 변수의 타입이나 변수명만 보고도 예측할 수 있다. 가운데의 경우 이미 메소드에서 input데이터는 무엇인지 어떤 데이터가 output되있는지 명시되어 있다. 아래의 경우 설명하지 않아도 이미 default 생성자이다. 버전관리 시스템의 역할을 하지 마라 누가 만들었는지, 언제 만들었고 수정했는지는 버전관리 시스템에게 맡기자. 2.. 클린코더스 강의 리뷰 3. Function Structure(2) Function을 작성 하는 규칙에 대해서 좀 더 알아보자 1. 하나의 Function은 상태를 변경(void)하거나, 값을 반환하거나 둘 중 하나여야만 한다. 흔히 하는 것인거 같다. 함수 내에서 객체의 값을 변환 하고 그 값을 리턴하는 식의.. User u = authorizer.login(userName, password); 다음 코드는 두가지 문제점을 가지는데, 1. user를 사용하기 위해서는 항상 login을 해야 한다는 점 2. login을 하면 원치 않아도 user의 정보를 읽어야 한다는 점 결국 User를 생성하면서 동시에 login이라는 상태를 바꾸게 되버리기 때문에 군더더기가 생기게 된다. 해당 코드는 다음과 같이 고칠 수 있다. authorizer.login(userName, pas.. 이전 1 2 다음
