안녕하세요! 강의 잘 보고 있습니다. :)다름이 아니라 테스트 코드 파일들의 작성 위치가 궁금한데요, 보니까 그냥 파일 바로 아래에 새로운 테스트 코드 파일이 있는 것 같은데 이게 보편적인 위치일까요?따로 테스트 코드 폴더를 만들거나 하진 않는 건지 궁금해서 문의드립니다.감사합니다 :)

 안녕하세요. 강의 너무 재밌게 잘 보고 있습니다. 두가지 질문이 있어서 문의글 남깁니다.   질문 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>, ), }; }; 감사합니다!

안녕하세요 2.1 class 단위 테스트를 작성하고 `npm run test`로 테스트를 구동 했을 때, 다음과 같이 테스트를 실패하고 있습니다. `nvm use`, 'npm ci'를 모두 마친 상황인데, 어떤 문제를 해결해야 할까요? 혹시나 싶어 스토리북을 구동했을 때는, 문제 없이 scripts 명령어를 입력했을 때 실행이 되는 것을 확인할 수 있었습니다.!github branch의 unit-test-example을 pull 받아서 진행했습니다!운영체제: Windows 11 import { 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'), ); });   FAIL src/components/tests/TextField.spec.jsx [ src/components/tests/TextField.spec.jsx ] Error: C:\Users\js953\Desktop\Github\fe-test\test-example-shopping-mall\src\components\tests\TextField.spec.jsx 21:3 error Expect must have a corresponding matcher call vitest/valid-expect ✖ 1 problem (1 error, 0 warnings) ❯ formatError node_modules/vite/dist/node/chunks/dep-abb4f102.js:43916:46 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-abb4f102.js:43912:19 ❯ TransformContext.transform node_modules/vite-plugin-eslint/dist/index.mjs:1:1989 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-abb4f102.js:44206:30 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-abb4f102.js:54851:29 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯ Test Files 1 failed (1) Tests no tests Start at 12:45:37 Duration 1.63s (transform 743ms, setup 883ms, collect 0ms, tests 0ms, environment 408ms, prepare 109ms) FAIL Tests failed. Watching for file changes... press h to show help, press q to quit ```Test result not found. If you set `vitest.commandLine` please check: Did you set `vitest.commandLine` to `run` mode? (This extension requires `watch` mode to get the results from Vitest api) Does it have the ability to append extra arguments? (For example it should be `yarn test --` rather than `yarn test`) Are there tests with the same name? Can you run vitest successfully on this file? Does it need custom option to run? Vitest output: DEV v0.33.0 C:/Users/js953/Desktop/Github/fe-test/test-example-shopping-mall API started at http://127.0.0.1:60930 ❯ src/components/tests/TextField.spec.jsx (0 test)

강의에서 진행하는 브랜치와 동일한 브랜치에서 진행하고 있습니다.의존성 설치도 모두 진행하였고 vitest도 설치했으며 node 버전도 일치합니다.테스트 코드 작성 완료 후에 이 아이콘을 찾아봤는데 도저히 보이질 않습니다.Github 이슈와 stackoverflow 모두 찾아보면서 해답이 될 만한 내용들을 따라해보았으나 위 아이콘은 도저히 찾을 수 없었습니다.혹시 따로 설정을 하신 건가요?? 

it('보여줄 상품 리스트가 더 있는 경우 show more 버튼이 노출되며, 버튼을 누르면 상품 리스트를 더 가져온다.', async () => { const { user } = await render(<ProductList limit={PRODUCT_PAGE_LIMIT} />); await screen.findAllByTestId('product-card'); const showMoreButton = screen.getByRole('button', { name: 'Show more', }); expect(showMoreButton).toBeInTheDocument(); await user.click(showMoreButton); expect(await screen.findAllByTestId('product-card')).toHaveLength( PRODUCT_PAGE_LIMIT * 2, ); });여기서 render 이후에 await screen.findAllByTestId('product-card'); 를 하는 이유가 있나요? 저걸 해주지 않으면 버튼이나 상품 아이템을 그리지 못하는 건 아는데... 그려지는 이유를 모르겠어서요 await로 찾을때까지 대기하는 걸로 이해하면 될까요?1. 그렇다면 render 호출 이후 요소를 찾지 않아도 되는 경우에도 await screen.findAllByTestId('product-card');를 해주어야 하는걸까요?2. 아래와 같이 하는거랑 차이가 있나요?it('보여줄 상품 리스트가 더 있는 경우 show more 버튼이 노출되며, 버튼을 누르면 상품 리스트를 더 가져온다.', async () => { const { user } = await render(<ProductList limit={PRODUCT_PAGE_LIMIT} />); const showMoreButton = await screen.findByRole('button', { name: 'Show more', }); expect(showMoreButton).toBeInTheDocument(); await user.click(showMoreButton); expect(await screen.findAllByTestId('product-card')).toHaveLength( PRODUCT_PAGE_LIMIT * 2, ); });

풀업은 턱걸이에서 듣던 용어인데요.용어를 찾아봐도 없는데, 정확히 전문 용어는 아닌 것 같고,어떤 의미로 사용되었는지 궁금합니다.

강의의 예시와 같이expect(textInput).toHaveStyle({ borderWidth: 2, borderColor: rgb(25, 118, 210) })으로 할 경우 정상적으로 test passed가 되긴 하는데,expect(textInput).toHaveStyle({ borderWidth: 1, borderColor: rgb(25, 118, 210) })처럼 변경할 경우에도 test passed가 되네요. testing-library/jest-dom#toHaveStyle 이나 비슷한 다른 이슈를 좀 확인해보니, 예시처럼이 아닌expect(textInput).toHaveStyle({ borderWidth: '1px', borderColor: rgb(25, 118, 210) })처럼 세팅해야 예상한대로 fail이 되는 것 같습니다. 그래서 border style을 검증하는 쪽 테스트 코드의 expect 부분도expect(textInput).toHaveStyle({ borderWidth: '2px', borderColor: rgb(25, 118, 210) })로 수정이 되어야 하지 않을까.. 조심스레 제안드려봅니다 ㅎ

안녕하세요테스트 강의 내주셔서 감사합니다! 실제로 프론트 테스트 코드를 작성해본 적이 없어서 재밌고 유익하네요.질문은 단위테스트 설명하는 부분의 예제 코드 관련입니다.2.1장에서 단위테스트 예제로 보여주신 내용은 "ClassName props으로 설정한 css class 가 적용된다"인데요앞장인 1장에서 설명한 내용인 "유의미한 테스트 혹은 인터페이스를 기준으로 작성한다" 와 맞지 않는 것 같아서요..AAA패턴을 보여주기 위한 예시 코드정도로 생각하면 될까요. 

강사님의 깃허브의 코드를 클론해서 npm i 까지 했습니다.이후 npm run dev 나 npm run storybook dev -p 6006을 실행하면 오류가 떠서 켜지지가 않아요..ㅠ살려주세요. 초기 세팅이 잘 안되네요

 안녕하세요 궁금한게 있습니다. act 함수에 대해 이해했는데 act 함수없이 아래와 같이 해도 테스트가 통과되더라구요. 혹시 차이가 있을까요?it('훅의 toggleIsModalOpened()를 호출하면 isModalOpened 상태가 toggle된다.', () => { const { result, rerender } = renderHook(useConfirmModal); result.current.toggleIsModalOpened(); rerender(); expect(result.current.isModalOpened).toBe(true); });

안녕하세요.2.1 단위 테스트란 무엇일까? 강의를 들으며 따라하고 있습니다.강의에서 진행하고 있는 unit-test-example 브랜치에서 TextField.spec.jsx 파일을 따라 치며 테스트를 하려고 하는데 vscode 테스트 메뉴에서 '이 작업 영역에서 아직 발견된 테스트가 없습니다.'라는 문구와 '추가 테스트 확장 설치'라는 버튼만 떠서 테스트 진행을 하지 못하고 있습니다.강의에서 소개해주신 vitest를 설치하고 vscode를 껐다가 다시 켜봐도 테스트를 찾을 수 없다고 뜨고 있는데 제가 어떻게 하면 될까요? 

REAMDE 1부 - 4장 > 정답코드 링크가 잘못 작성된 것 같아 제보드립니다https://github.com/practical-fe-testing/test-example-shopping-mall/blob/main/shopping-mall-integration-test-with-answer