안녕하세요. Payment테스트 코드 작성 부분에서 몇가지 궁금한점이 생겨 질문 드립니다. 1. 실제 Payment 컴포넌트에서는 useCouponList훅으로부터 selectedCoupon데이터를 받아와서 사용하는데 테스트 코드에서는 쿠폰 정보를 prop으로 전달하는 이유가 무엇인가요?2. 실제 구현 동작을 보면 ShippingInformationForm에서 쿠폰을 선택하면 Payment 쿠폰란에 곧바로 반영되는데 이런 부분까지는 통합테스트에서 검증하지 않아도 되나요?

안녕하세요.지금 챕터5 네비게이션바 테스트 코드 작성 부분을 보고 있는데 테스트 속도가 너무 느린 문제가 발생합니다ㅜ 테스트 항목 하나를 테스트 할때마다 21초씩 걸립니다... 생각보니 이 전 챕터에서도 테스트 시간이 조금 오래 걸리긴 했던거 같긴 해요. 이건 제 컴퓨터 문제일까요, 아니면 속도 저하의 원인을 파악하는 방법이라도 있을지 조언을 구해 봅니다ㅠㅠ

web api인 IntersectionObserver을 활용한 훅이 있는데요, 훅은 독립적으로 동작되기 때문에 단위 테스트 대상이라고 말씀하셨는데, 궁금한점은 web api를 활용한 훅은 단위테스트 대상일까요?테스트 환경이 다르고 web api는 이미 검증된 api이기 때문에 단위테스트 대상에서 제외 했거든요만약 단위 테스트 대상이라면 web api를 모킹해서 훅을 통해 반환한 값들을 확인 하면될까요?단위테스트 대상이 아니라면 통합테스트에서 해당 훅을 제대로 호출해서 사용하는지만 확인하면 될까요?

안녕하세요.효율적인 테스트를 위해 상태 관리는 상위 컴포넌트에 응집해서 관리하는것이 좋다고 하셨는데컴포넌트가 캡슐화 되어있으면 서로 상호 작용하는 컴포넌트지만 동일한 상태 조회를 각 컴포넌트에서 독립적으로 하게되는 경우도 있을거 같습니다.이런 경우는 테스트에 용이하도록 구현 코드를 수정해야하는지, 아니면 번거롭더라도 그대로 테스트 코드를 작성해야 하는지 궁금합니다.애초에 컴포넌트 설계를 잘못했다고 판단해야 할까요?

'특정 아이템의 수량이 변경되었을 때 값이 재계산되어 올바르게 업데이트 된다' 테스트 실행시 변경점이 있는 price를 '$4,045.00'과 같이 직접 입력하셨는데요. 이 부분을 formatPrice(809*4) 이런식으로 하면 formatPrice에 변경점이 생겼을 때도 테스트가 깨지지 않고 검증할 수 있고, 작성하기 더 쉬워보인다고 생각하는데요. 혹시 그렇게 하지 않은 이유가 따로 있을까요 ? (독립성을 보장한다던가..) 아래의 '특정 아이템의 수량이 1000개로 변경될 경우 "최대 999개 까지 가능합니다!"라고 경고 문구가 노출된다' 테스트의 cartValidationMessages.MAX_INPUT_VALUE 값도 마찬가지입니다 !!

안녕하세요. 몇가지 의문이 있어 질문 드립니다.올바른 테스트 작성 규칙에서 내부 구현에 대한 테스트, 단순한 UI렌더링 관련 테스트는 하지 않는것이 좋다고 하셨는데,className prop이 css class에 적용되는지, placeholder설정, focus 시 border 스타일이 변경되는지 테스트하는건 단순히 UI와 관련된 테스트가 아닌가요?getByPlaceholder API는 만약 구현코드에서 placeholder 내용이 달라지면 테스트 코드도 모두 수정해야 하는데 종속성이 있다고 볼 수 있지 않나요?아직 테스트가 익숙하지 않아 그런지 이런 부분이 많이 헷갈립니다ㅜㅜ

문제)의존성 설치 후 npm run dev를 기동하면$ npm run dev> test-example-shopping-mall@0.0.0 dev> concurrently --kill-others 'npm run dev:server' 'npm run dev:ui'[0] ''npm'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�[0] ��ġ ������ �ƴմϴ�.[1] 'run'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�[1] ��ġ ������ �ƴմϴ�.[2] ���� �̸�, ���͸� �̸� �Ǵ� ���� ���̺� ������ �߸��Ǿ����ϴ�.[3] ''npm'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�[3] ��ġ ������ �ƴմϴ�.[4] 'run'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�[4] ��ġ ������ �ƴմϴ�.[4] run exited with code 1--> Sending SIGTERM to other processes..[3] 'npm exited with code 1--> Sending SIGTERM to other processes..--> Sending SIGTERM to other processes..[1] run exited with code 1--> Sending SIGTERM to other processes..[0] 'npm exited with code 1--> Sending SIGTERM to other processes..[5] ���� �̸�, ���͸� �̸� �Ǵ� ���� ���̺� ������ �߸��Ǿ����ϴ�.[5] dev:ui' exited with code 1이런 콘솔이 찍히며 테스트 서버가 실행되지 않습니다.인코딩이 깨져서 뭐가 문젠지 추적을 못하겠어요ㅠㅠnode 버전은 강의와 동일하게 19.9.0으로 맞춰두었습니다.+) 인코딩이 깨지는 문제는 vscode터미널 말고 다른 커맨드창을 이용하니 해결 되었습니다.> test-example-shopping-mall@0.0.0 dev > concurrently --kill-others 'npm run dev:server' 'npm run dev:ui' [0] ''npm' is not recognized as an internal or external command, [0] operable program or batch file. [1] 'run' is not recognized as an internal or external command, [1] operable program or batch file. [2] The filename, directory name, or volume label syntax is incorrect. [3] ''npm' is not recognized as an internal or external command, [3] operable program or batch file. [4] 'run' is not recognized as an internal or external command, [4] operable program or batch file. [4] run exited with code 1 --> Sending SIGTERM to other processes.. [3] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [2] dev:server' exited with code 1 --> Sending SIGTERM to other processes.. [1] run exited with code 1 --> Sending SIGTERM to other processes.. [0] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [5] The filename, directory name, or volume label syntax is incorrect. [5] dev:ui' exited with code 1그런데 여전히 실행이 안됩니다ㅜㅜnpm을 못찾는거 같은데 환경변수에 따로 등록을 해야하나요? npm -v하면 버전은 잘 나오는데 원인을 모르겠습니다...현재 환경변수와 버전정보 추가합니다.+) package.json스크립트에서 작은 따옴표를 큰 따옴표로 수정해서 최종적으로 해결되었습니다... 허무하네용ㅋㅋㅋ ㅠ

시간: 9:00Q. ‘비밀번호를 입력하지 않고 로그인 버튼을 클릭할 경우 “비밀번호를 입력하세요” 경고 메시지가 노출된다’ 를 테스트 할 때, 비밀번호가 입력하지 않은 상태인지 확인하는 부분은 없어도 되는 건가요??비밀번호를 입력하는 요소가 null 인지 확인하는 테스트는 없어도 되는 건가요??

Q1. 장바구니, 구매 버튼 클릭 시 해당 상품의 이름을 cy.findByText('Handmade Cotton Fish 장바구니 추가 완료!').should('exist) 상품 이름을 직접 입력하는데, (통합 테스트에서 모킹 데이터를 사용한다면 모킹 데이터는 직접 설정하기 때문에 가능하지만), 실제 api를 사용하면 첫번째 상품 데이터가 변경할 수도 있기 때문에 실패할 수도 있기 때문에 다르게 작성해야 하지 않을까요?? 질문 드립니다 Q2. 로그인을 커스텀 커맨드에서 설정해서 session을 사용해 설정해서 테스트할 때, 웹에서는 로그인 성공/실패 여부는 확인할 수 없는 것 아닌가요??로그인이 실패하게 되면 로그인 관련 테스트는 모두 실패하게 되는데 그냥 이 결과로 로그인 성공/실패 확인을 하는 건가요??

Q. cy.intercept()는 회원 가입 요청에 대한 성공/실패 응답을 모킹해서 받는데, 이 때 의도하는 코드는 1번이지만 응답이 정해져 있기 때문에 2번처럼 틀린 요청으로도 결과는 똑같이 나오게 될 거라고 생각됩니다. 실제 응답이 아니라 응답을 정해 놓고 전달하기 때문에 실제 동작과 다를 수도 있어서 이 부분은 '실패, 성공 시 문구 노출'이 나타나는 동작이 있다는 document 로만 이해해도 될까요?? 1성공 데이터 요청 -> 성공 데이터 응답실패 데이터 요청 -> 실패 데이터 응답2실패 데이터 요청 -> 성공 데이터 응답성공 데이터 요청 -> 실패 데이터 응답

수업에서 처럼 이렇게 코드를 작성했을 때는 오류가 발생하는데placeholder를 넣으면 에러가 나지않습니다. 왜그런지 알 수 있을까요?!

최소 최대 가격을 수정할 때최소 금액이 0보다 작을 때최대 금액이 최소 금액보다 작을 때위 같은 조건을 처리할 때 관련 질문입니다describe 사용 여부 // 1 describe('최소 최대 가격 확인 테스트', () => { it("최소 금액이 0보다 작을 때, 이렇게~ 처리", () => {}); it("최대 금액이 최소 금액보다 작을 때, 이렇게~ 처리", () => {}); it("최소 최대 가격을 수정하면 setMinPrice, setMaxPrice action이 호출된다", () => {}) }) // 2 it("최소 금액이 0보다 작을 때, 이렇게~ 처리", () => {}); it("최대 금액이 최소 금액보다 작을 때, 이렇게~ 처리", () => {}); it("최소 최대 가격을 수정하면 setMinPrice, setMaxPrice action이 호출된다", () => {})위 같은 조건 테스트를 작성 하는게 좋은지 아니면 아예 입력 처리를 해서 작성 안하는게 좋은지 확인 (0보다 작은수는 입력되지 않고, 최대 금액은 최소 금액보다 무조건 크게 작성하도록 처리 등)  

마지막, 삭제 버튼 테스트Q. 삭제 버튼을 누르면 TableRow가 사라지니까 queryByText('text').not.toBeInTheDocument()를 사용해서 유무를 확인 하셨는데getByText('text').not.toBeInTheDocument()를 사용해서 해당 텍스트가 있는 요소가 없으면 에러가 나타나도록 유도해서 테스트 검증할 수도 있지 않나요?? 가능은 한건지, 권장이 되지 않는건지 질문 드립니다 

다른 분들도 겪은 문제인데 0.2.42 버전으로 다운그레이드 하려고해도 지원하지 않는 버전이라고 나오네요. npm run test 는 잘 실행되는거 같습니다. 혹시 해당 이슈 해결방법 알 수 있을까요 .. 아니면 그냥 npm run test 로 진행해도 상관없을까요

결과가 저렇게나오는데 yarn test 실행하면 로그가 정상적으로 출력됩니다 이유가뭘까요?

안녕하세요. 강의 내용 중 정확히 이해하지 못하고 있는 것이 있어서 질문 드립니다.강의 중 로그인 버튼 같이 간단한 동작만 있는 컴포넌트는 그 자체를 테스트 하는 것이 아니라, 통합 테스트로 상태에 따른 동작을 검증하는 것이 더 효율적이고 정확한 테스트가 된다. 라고 하셨습니다.또한 이런 컴포넌트는 스토리북과 같은 도구를 사용하여 스타일이나 레이아우싱 틀어지지 않는지 확인하는 것이 더 중요하다. 라고 말씀 하셨습니다.이 뜻은 통합 테스트를 스토리북과 같은 도구와 함께 하라는 것이 아니라, 통합 테스트로 상태에 따른 동작을 검증하고, 그 안에 있는 각각의 컴포넌트들은 스토리북 안에서 스타일과 레이아웃이 틀어지지 않는지 확인하라는 것일까요?아니면 스토리북을 통해 네비게이션 같은 컴포넌트를 만들고 그 단위로 통합 테스트를 하란 말씀이실까요??궁금합니다. 강의 너무 잘 듣고 있습니다. 정말 감사합니다!

안녕하세요. 2.1강에서 storybook, vitest 명령어를 사용했을 때, 에러가 나타나서 질문 드립니다 Settingbranch: unit-test-examplevitest 플러그인: v0.3.0 (현재 이하로는 변경이 안되는 것 같습니다)node: 19.9.0 eslint.json - `"prettier:prettier": "off"` 추가prettierrc - `"endOfLine": "auto"` 추가 storybook 사용 시(npm run storybook)  Web의 경우 새로고침을 하면 정상 페이지로 동작하지만 에러 로그는 그대로 입니다vitestimport { screen } from '@testing-library/react'; import React from 'react'; import TextField from '@/components/TextField'; import render from '@/utils/test/render'; it('className Prop으로 설정한 css class가 적용된다.', async () => { // Arrange - 테스트를 위한 환경 만들기 // -> className을 지닌 컴포넌트 렌더링 await render(<TextField className="my-class" />); // Act - 테스트할 동작 발생 // -> 렌더링에 대한 검증이기 때문에 이 단계는 생략 // -> 클릭이나 메서드 호출, prop 변경 등등에 대한 작업이 여기에 해당 합니다. // Assert - 올바른 동작이 실행되었는지 검증 // -> 렌덩링 이후 DOM에 해당 class가 존재하는지 검증 // TextField는 placeholder 요소가 있습니다. // vitest의 expect 함수를 사용하여 기대 결과를 검증 expect( screen .getByPlaceholderText('텍스트를 입력해 주세요.') .toHaveClass('my-class'), ); });

실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에"msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!

안녕하세요 현재 섹션2 관련하여 강의 듣고 있는 수강생입니다. 다름이 아니오라, 현재 강의에선 순수 css를 통해 클래스명 테스트 코드를 작성해주셨는데요..! 만약에 css 모듈이나, vanilla-extract 같이 클래스명이 동적으로 생성되는 경우에는 어떤식으로 테스트 코드를 작성해야할까요 ? 예전에 혼자서 vanilla-extract 관련해서 테스트 코드를 작성해보려고 했던적이 있는데, 단순히 toHaveClass로만 하려고하니까, 클래스명이 동적으로 결정이 되어서 에러가 계속 발생하더라구요..! (예를 들어서 클래스명이 header라면, headerhnfgbvds341 이런식) 강의 너무 잘 듣고 있습니다! 읽어주셔서 감사합니다. import React from "react"; import { render, screen } from "@testing-library/react"; import TestComponent from "@/components/TestComponent"; import { testContainer } from "@/components/testComponent.css"; describe("Example Component Test", () => { test("클래스명에 대한 테스트", () => { render(<TestComponent />); const exampleElement = screen.getByText("TestComponent"); expect(exampleElement).toHaveClass(testContainer); }); }); ```

4.3 강의 자료 pdf가 아닌 key 파일이 다운받아집니다.