49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
MSW로 애플리케이션 실행하는 방법
서버를 사용하지 않고 MSW만을 사용해서 테스트 및 브라우저에서의 애플리케이션을 개발하고 싶은 경우에는 MSW를 Jest와 브라우저에 모두 연결 및 통합하면 될까요? 그럴 경우에 이미지 파일 경로를 어떻게 줘야하나요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
컴포넌트 증가 테스트
안녕하세요, 강의 잘 보고 있습니다. 혹시, +,- 버튼에 대한 테스트를 증가와 감소 만 테스트가 가능한데, 혹시 + 10을 증가하는 테스트를 하기 위해서는 fireEvent.click(buttonElement)를 10번 실행시켜주어야하는건가요??? 감사합니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
test를 위한 컴포넌트 변경
안녕하세요, 강의 잘 보고있습니다. 이번 강의에서 test로 컴포넌트를 갖고오기 위해 data-testid를 넣어주셨는데, 기존 구현되어있는 컴포넌트를 테스트 하기 위해 기존 컴포넌트를 변경을 해주어야하는게 맞을까요??? 예를들어, 5분 31초 가량 코드 10번째 라인에서 <h3 id="counter">0</h3>의 코드를 테스트를 위해서 <h3 id="counter" data-testid="counter">0</h3>로 변경을 해야하는 걸까요?? 모든 코드를 테스트를 위해 컴포넌트를 변경해야하는지 의문이 들어 질문을 드리게 되었습니다. 감사합니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
테스트 실행시간
테스트 실행시간이 너무 긴것같아 질문남깁니다. 코드는 clone 후 npm i로 설치하여 개인적인 코드는 추가하지 않은 상태입니다. 강의에서는 Time이 1s 이내에 완료되는데 저는 4s가 넘어버리내요...
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
axios의 get request를 이용해서 products를 가져오는 부분에서 500 에러가 납니다.
안녕하세요. 좋은 강의 감사합니다. 방금 완강했는데 TDD에 대해서 많이 배울 수 있어서 좋았습니다. 다름이 아니라 테스트는 통과하기는 하지만 Type.js의 loadItems 함수에서 localhost:5000/products로 get request를 날려서 product 정보를 가져오는 부분에서 자꾸 500 에러가 나는데 왜 그러는지 이유를 잘 모르겠어서요. Type.test.js를 실행할 때에 에러가 발생하고 있는데요. try 부분에서 console.log를 찍어보면 products도 mocks/handlers.js에 정의된 response를 잘 받고 있고 그래서 테스트도 통과하는 것 같은데 꼭 한 번씩 catch 부분에 들어가서 에러가 발생하네요. 에러 내역을 로그로 찍어보면 url은 http://localhost:5000/products로 알맞게 들어가있는데, data가 undefined입니다. mocks 폴더의 handlers, server와 Type.js를 확인해봐도 잘 모르겠어서 강의 첨부파일 소스코드로 바꿔서 진행해봐도 마찬가지로 에러가 뜨는데요. 충분한 정보를 드리지 못하면서 질문 드리는 것 같습니다만, 혹시 이런 경우가 있으셨는지 궁금합니다. 감사합니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
혹시 서버 코드는 왜 필요한 것인가요?
혹시 제가 잘못 이해하고 있는 게 아니라면 Mock server라는 건 서버가 없는 상황에서 서버가 있는 것처럼 가정하고 테스트를 하는 것이고, 강의 중에 말씀하신 것처럼 외부의 서버로 나가는 request를 가로채서 대신에 mock server worker에서 handlers.js에 정의한 response를 주는 것 같은데요. 혹시 강의 소스코드에 서버 코드는 왜 있는 것인가요? 서버 코드 안에 보면 이미지들이 들어있던데, mock server worker를 이용하는 경우라면 이 이미지들이 mock server와 관련된 디렉토리에 들어 있는 것이 맞지 않나요? 강의를 들으면서 빠드리고 넘어간 부분이 있는 것인지 이미지 로딩이 안 되어서 좀 헤매는 중에 이해가 안 되는 부분이 생겨서 여쭤봅니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
1 failed 질문
해당 방식처럼 useContext 에러라서 test-utils 로 바꾸니 또다른 에러가 나오는데요.. 아무리 찾아도 방법을 못찾겠습니다. 하단에 스샷을 보내 드립니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
getByrole을 통해 얻은 htmlElement 객체에 prefix에 aria
안녕하세요 john ahn님. 강의를 수강하면서 궁금한 점이 있어 여쭙니다. 저는 react, typescript 환경으로 tdd 강의를 수강하고 있는데요. 코드를 따라 치던 중 getByRole이 HTMLelement 객체를 반환하는데 checked랑 disabled는 없고 prefix에 aria가 붙은 aria-checked와 aria-disabled만 존재합니다. 질문은 prefix에 aria가 붙은 value를 사용해도 되는지가 궁금합니다. 그리고 aria로 사용해도 될지 몰라서 matcher에다 expect(checkbox).not.toBeChecked(); 이런 코드를 작성했는데, 똑같은 효과를 얻을 수 있는 지도 궁금합니다. 감사합니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
emotion, styled-components, css module 등
좋은 강의 감사합니다 ! 궁금한점이있습니다. 현재 inline 으로 스타일을 넣으셨는데, 실무에서는 인라인 방법은 쓰지 않고있는것으로 알고있습니다. emotion, styled-components, css module 으로 스타일을 변경시킬때도 이방법을 똑같이 사용하면 될까요? 아니면 이 방식은 inline 전용 테스트 방법일까요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
혹시 소스코드 내려받으면 깨지는데 이것도 공유자료가 있나요??
이 강의 깃헙주소라도 있음 알려주세요 ㅠㅠ
- 해결됨따라하며 배우는 리액트 테스트 [2023.11 업데이트]
선생님 질문 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 서버실행 하였고 리액트 npm start를 하였을때 화면이 서버데이터가 안들어옵니다. 어떤걸 확인해보면 좋을까요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
jest와 @testing-library/jest-dom
너무 기초적인 질문인 것 같아 걱정이지만 질문드립니다~! 1. jest와 @testing-library/jest-dom는 어떤 차이가 있고 각각의 역할이 궁금합니다. 2. @testing-library와 함께 사용하는 이유와 jest만 따로 사용하지는 않는 이유가 궁금합니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
빨간줄질문입니다...!
안녕하세요 선생님 타입스크립트로 따라하면서 배우고 있습니다. Type.test.ts 에서 element에 alt가 없어서 빨간줄로 뜹니다. 테스트는 잘되는거보니 있는 실제로는 요소 같은데 왜 빨간줄이 뜨는 걸까요? summaryPage test 에서도 이런 경우가 있엇는데 checked는 없고 area-checked는 있다고 뜨더라고요... 일단 이렇게 해결하고 넘어가기는 했습니다. 근데 이렇게 계속 오류가 나면 마음이 좀 불편해서 그런데 해결책 있을까요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
서버 소스코드는 어떻게 구하나요?
4번째에 첨부한 테스트코드.zip은 안에 비어있다고 뜨네요. 혹시 다른 github 주소가 있나요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
useContext 사용
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 먼저 좋은 강의 너무 잘 듣고 있습니다 감사합니다~~~~~~!지금 강의 안에서 userContext 사용 관련 flow 중에서 궁금한 내용 질문드립니다! 1. useContext를 사용하면 바로 product와 options 파일에 data를 가지고 올 수 있을 것 같은데type에서 먼저 받아서 props로 내려주시는 건 왜 그런지 궁금했습니다.orderContext 부분은 몇 번 봐도 좀 어렵네요..😂그래도 길지 않고 핵심 내용만 올려주셔서 몇 번이나 돌려보고 있습니다. 2.orderDatas 에서요 data는 그 자체로 복수형 단어라서 data라고 쓰거나 복수형이 가능한 단어를 쓰면 좋을 것 같은데..마땅한 단어가 안 떠오르네요ㅠ
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
안녕하세요! 핸들러들을 리셋하는것에 대해서 궁금한게 있습니다.
강의 너무 잘 듣고있습니다 :) 선생님이 목서버를 설정해주실때 3가지를 설정해주셨는데 그 중에서 2번째인 " 테스트 중에 추가한 Request 핸들러들이 다른 테스트를 방해하지 않게 하기 위해 리셋을 해준다" 라고 하였는데, 이때 방해를 하는 상황이 어떤것이고 이것을 리셋안하게 되면 어떠한 현상이 일어나는건가요..? 단순하게 왜 리셋을 하는지는 알겠는데 그 하는 이유가 제가 아직 경험하지 못한 상황이라 궁금합니다!
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
이번 강의에 보이는 terminal 내용이랑 제 컴퓨터 터미널 내용이랑 다릅니다.
카운터 숫자 구현하기 이 강의에 나오는 터미널 내용이랑 제 컴퓨터 터미널 내용이랑 다릅니다. 아마도 package.json 부분에 "test": "react-scripts test", 이 부분을 수정해야 하는건가요? 강의 내용중에 없었던 것 같아서 질문합니다. FAIL src/App.test.js ● Test suite failed to run Cannot find module 'core-js-pure/features/get-iterator' from 'node_modules/@babel/runtime-corejs3/core-js/get-iterator.js' Require stack: node_modules/@babel/runtime-corejs3/core-js/get-iterator.js node_modules/aria-query/lib/rolesMap.js node_modules/aria-query/lib/index.js node_modules/@testing-library/jest-dom/dist/to-be-checked.js node_modules/@testing-library/jest-dom/dist/matchers.js node_modules/@testing-library/jest-dom/dist/extend-expect.js node_modules/@testing-library/jest-dom/dist/index.js src/setupTests.js at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:306:11) at Object.<anonymous> (node_modules/@babel/runtime-corejs3/core-js/get-iterator.js:1:107) Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 0.358 s Ran all test suites. Watch Usage: Press w to show more.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
옵션 정보 가져오기 - 테스트 에러 질문입니다.
옵션 정보 가져오기 테스트중에 에러가 나타나서 질문드리겠습니다. 위 이미지와 같이 checkbox를 찾을수 없다고 에러가 나타나고 있습니다. 혹시 모를 오타가 있나해서 강의자료에서 받은 코드를 복붙해도 동일하게 나타나는데 어떤 점이 문제일까요 ..? 작성한 코드 같이 첨부하겠습니다!
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
자료를 다운받으니
자료를 다운 받으니 전체적으로 이렇게 보이는데요
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
여해 상품 판매 앱 만들기 - MSW 를 이용한 테스트 2 에러
여해 상품 판매 앱 만들기 - MSW 를 이용한 테스트 2 과정 마지막까지 한 결과 에러가 발생하여 확인부탁드립니다. 해당 과정 마지막 즈음에 테스트 코드를 작성하고 테스트를 확인하는데 해당 테스트 부분에서 에러가 발생합니다. 에러 내용은 사진과 같습니다 render 로 Type 컴포넌트를 렌더링했는데 해당 오류가 발생했습니다. api mock 테스트하기 위해 msw 설정을 하였으며 테스트 코드와 컴포넌트도 잘 작성한 거 같은데 해당 오류가 발생했습니다. 의심가는 부분은 msw 부분입니다.