안녕하세요 nock을 활용한 HTTP request mocking 강의를 듣던 도중 계속 테스트 실패가 일어나 확인하니 axios 400 에러가 나고 있는데 isError 가 true 로 오지 않아 테스트가 실패하고 있는 것 같습니다. LoginPage의 isError 를 !isError 로 변경하니 테스트가 통과 되었습니다. 원래 isError 가 false로 오는게 맞는 건가요??
안녕하세요 섹션 2의 nock을 활용한 HTTP request mocking 강의 1:31초 부분에 질문이 있습니다. fireEvent.change(emailInput,{target:{value:" wrong@email.com }}); fireEvent.change(passwordInput,{target:{value:" wrongPassword }}); 를 적으시는 부분에서 잘못된 패스워드와 잘못된 이메일을 입력할 때 라고 말씀하셨는데 value 부분은 string이어서 " wrong@email.com " 이 틀린 이메일을 말한다는걸 코드가 이해하는 부분도 아닐 것 같은데 어떻게 에러 코드를 던져주는건지 궁금합니다! ( 로그인에 실패한다. 라는 상황이 코드상에 보이지 않는 것 같은데 코드가 어떻게 이해하는지를 모르겠습니다! )
안녕하세요. 수강중에 해당 부분에서 막혀서 계속 찾아보다가 질문 남깁니다,, 다름이 아니라 터미널에서 직접 git add . git commit -m "~~" 하면은 해당 pre-commit 이 정상적으로 동작하는데 인텔리제이에서 실행하면 안되는 상황입니다.. 아 강의에 있는거처럼 인텔리제이에서 run git hooks 는 체크 해놨습니다. 혹시 이외에 다른걸 확인할 방법이 있을까요 인텔리제이 버전은 IntelliJ IDEA 2023.2.1 (Ultimate Edition) 입니다.
강의에 나온 내용은 아니지만 개인적으로 개발을하다 궁금한 점이 생겨서 질문 드립니다. 조회 API를 만들 때 (GET요청)Controller단에서 파라미터를 받는 방식이 @RequestParam, @ModelAttribute 크게 2가지 있는데 2가지 방식중 어떤 방식을 선호하지는지 질문드립니다. @RequestParm을 사용했을 때는 Controller단에서 바로 직관적으로 어떤 파라미터를 받는지 확인이 가능하다는 장점이 있지만 Service단으로 파라미터를 넘겨줄 때, 하나하나 넘겨줘야해서 파라미터가 추가되었을 때 불편하다는 점이 있을 테고 @ModelAttribute를 사용했을 때는 수정에는 유리하겠지만 가독성은 떨어질 것 같다는 생각이 듭니다. 강사님은 어떤 생각을 가지고 계신지, 현업에서는 주로 어떤방식으로 개발을 하는지 의견주시면 감사하겠습니다.
공유해주신 프로젝트 clone해서 수정 없이 npm run unit-test 명령어 실행 시, 아래 이미지와 같이 export().toBeInTheDocument() 를 찾지 못해 진도를 나가지 못하고 있습니다.. 혹시 해결방안을 알려주실 수 있으실까요? 구글링 검색 시, import "@testing-library/jest-dom"; 을 테스트 파일 가장 상위에 두라고 하는데 이미 되어 있고 다른 해결책들도 실행해보았지만 해결하지 못했습니다. 노드 버전은 20.10.0 , 18.19.0 , 18.14.0 에서 실행했을 때, 모두 실패했습니다..
it('연이어 호출해도 마지막 호출 기준으로 지정된 타이머 시간이 지난 경우에만 함수가 호출된다.', () => { const spy = vi.fn(); const debouncedFn = debounce(spy, 300); // 최초 호출 debouncedFn(); // 최초 호출 후 0.2초 후 호출 vi.advanceTimersByTime(200); debouncedFn(); // 두번째 호출 후 0.1초 후 호출 vi.advanceTimersByTime(100); debouncedFn(); // 세번째 호출 후 0.2초 후 호출 vi.advanceTimersByTime(200); debouncedFn(); // 👈 4번째 호출 // 네번째 호출 후 0.3초 후 호출 // 최초 호출 후에 함수 호출 간격이 0.3초 이상 -> 다섯번째 호출이 유일 vi.advanceTimersByTime(300); debouncedFn(); // 👈 5번째 호출 // 다섯번을 호출했지만 실제 spy함수는 단 한 번만 호출 expect(spy).toHaveBeenCalledTimes(1); }); 안녕하세요. 새해 복 많이 받으세요 :) 다름이 아니라 위 코드에서 4번째 호출 후 바로 뒤, vi.advanceTimersByTime(300); 로 인해 0.3초가 흘렀고 이로 인해 expect(spy).toHaveBeenCalledTimes(1); 이 맞다고 나온 것이 아닌지 궁금해서 질문드립니다. 강의에서는 4번째 호출이 아닌 5번째 호출로 인해 호출된다고 하셨는데(최초 호출 후에 함수 호출 간격이 0.3초 이상인 경우는 다섯번째 호출이 유일하다고 하신 것 같아요) 5번째 호출 후에는 0.3초가 흘렀다는 가정 ( vi.advanceTimersByTime(300); )이 없고 제가 혼자 테스트 해보며 5번째 호출 후에 vi.advanceTimersByTime(300); 를 넣어 0.3초가 흘렀다고 가정을 하니 호출이 2번 되었다고 떠서요. 제가 debounce를 헷갈려 했는데 제가 아직 잘 이해하지 못한 부분이 있는 건지 아니면 실제로 잘못 설명된 부분이 있는 건지 모르겠어서 질문 드립니다. 감사합니다.
안녕하세요 강의 잘 보고 있습니다. 다름이 아니라 5분 48초에 나오는 부분에서 DIP 원칙으로 설계 하셨는데.. 그럼 결국에 프로덕션에서는 getMils() 메서드를 사용하면 똑같이 내부적으로 의존성이 감춰지기 때문에 초반에 설명하신거하고 똑같은 상황이 되는게 아닌가요?? 감사합니다!
mocking과 spy함수가 조금 헷갈립니다. 아래와 같이 정리하면 될까요? - spy 함수 : 빈 함수인데, vitest에서 이 함수를 감지하고 있고 함수가 call 되었는지, 인자는 무엇이었는지 검증하는 가짜 함수. - mocking : 종속성이 있는 라이브러리를 복사해두고, 그 중 사용해야 할 함수나 기능을 spy 함수로 대체하여 call 했는지 검사할 수 있는 프로세스. 그러면 mocking 자체는 spy 함수 없이 사용하는 것은 의미가 없다고 보면 될까요?
TODO앱을 클래스앱에서 컴포넌트 함수형 으로 바꾸는과정에서 뭔가 문제가 생겼는지 아니면 이전부터 문제가 있었는지는 모르겠는데 이런오류가 뜨면서 되지않네요 ㅠㅠ 리액트 초짜라 뭘 어떻게 바꿔야할지 모르겠습니다 ㅠㅠ 답변부탁드립니다 감사합니다 ㅠㅠ 위에 문제가 된다고 하는 6행 74행 사진입니다 ㅠㅠ
안녕하세요! 강의 잘 보고 있습니다. :) 다름이 아니라 테스트 코드 파일들의 작성 위치가 궁금한데요, 보니까 그냥 파일 바로 아래에 새로운 테스트 코드 파일이 있는 것 같은데 이게 보편적인 위치일까요? 따로 테스트 코드 폴더를 만들거나 하진 않는 건지 궁금해서 문의드립니다. 감사합니다 :)
안녕하세요. 강의 너무 재밌게 잘 보고 있습니다. 두가지 질문이 있어서 문의글 남깁니다. 질문 1. 테스트코드에서 async, await 가 필요없어 보이는 곳에도 꼭 붙이는 이유가 있나요? 예를들면, 아래 1번 코드에서 async await 이 반드시 필요한 이유가 있는건가요? 저는 2번처럼 async-await을 제거해도 테스트가 정상 통과 되어서요. 특별한 목적이 있어서 붙여야 하는건지 궁금합니다. ! 1) it('총 상품 금액은 "$500.00"로 노출된다', async () => { await render(<TestPayment />); expect(screen.getByText('500.00')).toBeInTheDocument(); }); 2) it('총 상품 금액은 "$500.00"로 노출된다', () => { render(<TestPayment />); expect(screen.getByText('500.00')).toBeInTheDocument(); }); 질문 2. render 함수를 util 로 만들어서 사용하시는데, userEvent.setup의 user 도 함께 들어있는 이유가 궁금합니다. userEvent를 쓰지 않는 테스트코드도 있는데, 꼭 함께 들어있어야하나 하는 생각이 들어서요 ㅎㅎ userEvent를 더 편리하게 사용하기 위함인가요? export default async (component, options = {}) => { const { routerProps } = options; const user = userEvent.setup(); return { user, ...render( <QueryClientProvider client={queryClient}> <MemoryRouter {...routerProps}>{component}</MemoryRouter> <Toaster /> </QueryClientProvider>, ), }; }; 감사합니다!
학습 관련 질문을 남겨주세요. 어떤 부분이 고민인지, 무엇이 문제인지 상세히 작성하면 더 좋아요! 먼저 유사한 질문이 있었는지 검색해 보세요. 서로 예의를 지키며 존중하는 문화를 만들어가요. 안녕하세요 선생님 강의 잘보고 있습니다. 질문드리고 싶은 부분은 강의에서 사용되는 아키텍처에 대한 것입니다. 레이어드 아키텍처라는것은 이해했지만, 패키지 구조가 생소해서 어떻게 구성되는지는 이해하기 어려운것 같습니다. 제가 아는 방식은 컨트롤러, 서비스, 리파짓토리, 도메인 패키지로 단순하게 작성하는 방법인데, 여기서 사용된 패키지 구성방식과 관련된 키워드나 레퍼런스를 얻을 수 있을가요?
에러 처리를 위한 단위테스트 작성 강의 내용 중 이해가 가지 않는 부분이 생겨 글 남김니다. errorMessage 의 message 내용은 description property missing 에러입니다. 그렇다면 테스트 상황에서 포스트맨과 동일하게 description이 빠진 객체를 저장하다 에러가 발생해야 맞는 테스트가 아닌가 하는 의문이 생기네요. it('should handle errors', async () => { const errorMessage = {message: "description property missing"}; const rejectedPromise = Promise.reject(errorMessage); productModel.create.mockReturnValue(rejectedPromise); await controller.createProduct(req, res, next); expect(next).toBeCalledWith(errorMessage); })
