# testing library

React Testing
Unit Test통합테스트에 비해 빠르고 쉬움통합테스트를 진행하기 전에 문제를 찾아낼 수 있음(통합테스트 성공보장 X)테스트 코드가 동작을 설명하는 명세가 됨(테스트를 읽고 어떤 동작을 하는지 예측 가능)코드를 수정하거나 기능을 추가할 때 수시로 빠르게 검증할 수 있음
react dynamic import suspense unit test
모듈을 dynamic import 로 불러오는 경우를 test 할 때는 일반적인 test 방법을 사용할 경우 test 가 통과하지 않는다. 이유는 suspense 에서 fallback 에 지정한 요소를 render 하고 , testingLibrary 에서는 해당 ren

[TDD] testing-library (integration test)
하나의 component에 대해서만 테스트한다. 즉, 다른 component와 interaction되는 것을 테스트하는 것이 아니므로 props를 임의값으로 넣어서 테스트한다.integration test는 연결된 컴포넌트간의 동작에 대해서 테스트한다.Todo.js,
[react-test] async test
HTTP Request로 데이터를 받아오는 경우, async로 테스트를 해야한다. 실제 데이터로 테스트할 수도 있고, mockup을 만들어서 테스트할 수도 있다.random user를 axios.get 한다.data-testid로 dynamic testid를 만든다.
[testing-library] react-testing-library (unit test)
아래 3가지는 cra를 하면 기본으로 설치됨각 컴포넌트 directory내에 \_\_test\_\_ directory를 생성\_\_test\_\_/ComponentName.test.js 생성render : 테스트할 컴포넌트를 랜더링 (Render a component
ReactHookForm Submit 테스트 이슈
Testing 공부를 위해 간단한 todo-list 앱을 만들어 테스트중에있다.form의 경우 react-form-hook을 사용하는데, submit 이벤트를 호출해도 jest에서 제대로 감지못하는 이슈가있었다. 거의 3시간을 소요한 것 같다... ㅠㅠ원인은 간단했다.
Testing Library
React testing library React testing library est déjà injecté dans package.json avec jest dans CRA(Create-React-App)
Enzyme & @testing-library
L'objectif de test en React, c'est de vérifier si tel ou tel résultat s'affiche dans le composant...

testing-library로 페이지 테스트 작성하기
매일 배운 것을 이해한만큼 정리해봅니다. 오늘은 리액트에서 tesing-library를 통해 페이지 렌더 테스트를 만드는 과정을 공부해보았습니다.

[React] TDD란?
예전부터 계속 배우고 싶었던 TDD(Test Driven Development, 테스트 주도 개발)에 대해서 알아보고, 어떤 흐름으로 테스트 코드를 작성하는지 알아보죠.velopert님의 TDD 포스팅을 참고했습니다.테스트 코드를 먼저 작성하고 나서 이를 통과시키기 위

Jest / testing-library / puppeteer 을 이용한 React Component 테스트 with TypeScript
최근에 Creative Storage라는 프로젝트를 진행하였습니다. TDD를 도입하여 프로세스를 진행하기로 하였었고, Frontend에서 React를 사용하였기 때문에, React Component를 테스트 해야할 필요가 생겼습니다. 그래서 환경 구성을 시도해보았는데 쉽지 않...