프론트엔드 정복하기

CRA(create-react-app)으로 앱을 만든 경우, setupTests.js 파일이 test 설정 관련 파일로 설정되어 있다. CRA로 앱을 만들지 않은 경우, 어떻게 config를 조정할까?! react-testing-library 공식 홈페이지에서는 react-testing-library 설정을 jest.config.js 로 하는 법을 알려주고 있다. testing-library.com/docs/react-testing-library/setup Setup | Testing Library React Testing Library does not require any configuration to be used. However, testing-library.com 즉, jest 설정하는 법을 보면..

테스트 중 아래와 같은 에러 메세지가 발생했다 ReferenceError: regeneratorRuntime is not defined test('', async()=>{ ... }) 테스트 코드를 위와 같이 작성했는데, async/await를 사용함으로 인해 발생한 에러라고 한다. 바벨이 async/await를 regeneratorRuntime로 설정해두었기 때문이라고 함. regeneratorRuntime 모듈을 포함한 babel-polyfill을 설치 후 import 하면 해결된다. npm install --save-dev babel-polyfill 그리고 index.js에서 위를 import 하면 된다! medium.com/@jongmoon.yoon/mocha-%EB%8B%A8%EC%9C%84-%..

react-testing-library 의 예시를 보여주는 블로그들을 보면, 어떤 곳에서는 describe와 it을 쓰고, 어떤 곳은 test를 쓴다. 차이는 무엇이고 어떤 것을 써야하는걸까??? react-testing-library 공식 홈페이지에서는 아래와 같이 설명하고 있다. testing-library.com/docs/react-testing-library/migrate-from-enzyme/#import-react-testing-library-to-your-test Note: you can also use describe and it blocks with React Testing Library. React Testing Library doesn't replace Jest, just Enzyme..

render 함수를 실행하고 나면 그 결과물 안에는 다양한 쿼리 함수들이 있다. 이 쿼리 함수들은 Variant와 Queries의 조합으로 이루어져있다. RTL 공식사이트에서는 다음 우선순위에 따라 사용할 것을 권장한다. getByLabelText getByPlaceholderText getByText getByDisplayValue getByAltText getByTitle getByRole getByTestId ( ** 아래 Queries 리스트 순서대로임) Variant Variant명 기능 getBy getBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 없으면 에러가 발생합니다. getAllBy getAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리..

TDD의 장점 - 무엇을 개발해야하는지, 무엇이 문제인지 명확히 알고 시작할 수 있다. - 문제를 먼저 정의한 뒤 ---->> 문제의 해답을 찾아가는 루트라 할 수 있다. - 완성된 코드가 문제없이 동작하는지 console.log() 등을 통해 알필요 없다. - 코드 변경이 일어난 경우 또다시 console.log() 등을 통해 테스트할 필요 없다. - 아무리 설계를 잘하고, 유연하게 짰다고 해도, 테스트 코드가 없다면 코드 변경을 주저하게 된다. TDD의 핵심 과정 실패 (문제 정의, 테스트 코드를 실제코드보다 먼저 작성) --->> 성공 (문제 해결, 테스트를 통과할 수 있는 최소한의 코드를 작성) --->> 리팩토링 (불필요하고 비효율적인 코드를 개선한다.) 무엇을 테스트해야할까? : 내가 만든 기..

CRA(Create React App)를 통해 리액트 패키지를 설치하면 React Testing Library도 같이 설치되어서 테스팅 라이브러리를 설치하지 않아도 테스트 주도 개발을 할 수 있다. 하지만 테스팅 라이브러리를 지원하지 않는 버전으로 CRA를 실행했거나, CRA를 통해 리액트 패키지를 설치하지 않은 경우에는 React Testing Library를 직접 설치하고 셋팅해야 한다. React Testing Library를 사용해야 하는 몇 가지 이유가 있다. 모든 테스트를 DOM 위주로 진행하며, 필요한 기능들만 지원해줘서 매우 가볍고, 개발자들이 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있도록 도와준다는 점이다. 자, React Testing Library를 설치하고 셋팅해보자..