TDD를 위한 준비

준비물

CRA를 이용해서 프로젝트를 시작할 때는 그냥 아무 생각 없이 npm test/ yarn test를 돌리면 테스트 코드가 돌아갔는데

내가 맨땅에 하려고 하니 대체 어떻게 시작해야할지를 모르겠었다

그래서 package.json을 들어가 스크립트를 살펴보니 react-scripts라는 명령어로 전부 돌아가고 있었는데

여기 굉장히 설명이 잘 되어있어서 많은 참고가 되었다

여튼 webpack이나 기타 설정들을 모두 담당하고 있다는 것인데

저 스크립트의 힘을 빌릴 수 없는 상태이지만 리액트의 테스트 코드를 작성하기 위해서 jest와 testing-library를 사용한다는 것을 알고 있다

jest 와 testing-library를 설치하고 홈페이지를 뒤적거려보니 jest 명령어로 프로젝트 내에 있는 모든 test 파일을 돌릴 수 있었다

매 번 실행시켜주기 귀찮으므로 --watchAll 옵션을 붙여서 파일 변경이 감지될 때 마다 테스트를 재실행하게 해주었다

// in package.json
  "scripts": {
    ...
    "test": "jest --watchAll"
  },
    ...

테스트코드

jest 명령어로 인식하는 파일들은 .test.js로 끝나는 이름을 가진 친구들이다

우선 간단하게 App 컴포넌트에 input 두 개가 필요한데

유닛테스트로 진행하기보다는 통합 테스트로 진행할 예정이기때문에 App컴포넌트 테스트로 진행한다

test('화면에 input이 두 개 렌더링된다', ()=>{
    render(<App/>);
    const inputs = screen.getAllByRole('textbox');

    expect(inputs.length).toBe(2);
});

App 렌더링하고 난 뒤 화면에 textbox 역할을 가진 원소가 2개 있는지 찾는 테스트 코드를..작성하고 테스트를 돌렸는데

test fail이 아니라 뭔 이상한 오류가 뜨기 시작했다

에러

Cannot find module 'react' from 로 시작하는 말도 안되는 오류가 발생하기 시작했는데

찾아본 결과 jest가 es6와 jsx 문법을 인식해서 못 해서 발생하는 문제 같다

트랜스파일링 해주기 위해서 바벨을 설치하고 preset을 설정해주어야한다

@babel/core, babel/preset-env,@babel/preset-react을 모두 설치해주자

프로젝트 상단에 .babelrc에

{
  "presets": ["@babel/preset-env","@babel/preset-react"]
}

와 같이 작성해주면 정상적으로? 테스트가 실패한다