묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
useState 배열값 변경의 경우 테스트 멈춤
질문있습니다. const modelListData = ['model1', 'model2', 'model3'] const [rowData, setRowData] = useState([]) useEffect(() => { setRowData(modelListData) }, [modelListData])위 처럼 작성을 한 후에 테스트를 돌리면 그냥 터미널이 멈춰 버립니다...그런데 setRowData(modelListData)이걸 주석처리 하거나 배열이 아닌 타입의 값을 넣을 경우에는 테스트가 제대로 동작합니다. 혹시 test코드에 뭔가를 작성을 해주어야 할까요? ㅠㅠ테스트 코드는 아래처럼 작성하고 돌려보았습니다.describe('모델리스트 컴포넌트 및 기능 테스트', () => { test('테스트 왜 안됨?', () => { render(<ModelList />) }) }) 그런데 터미널은 여기서 아무리 기다려도 다음으로 넘어가지 않습니다. 단 setRowData에 배열이 아닌 타입의 값을 넣을 경우에는 무리없이 잘돌아갑니다 ㅜㅜ RERUN src/modelManager/components/ModelList.tsx x2 · src/__test__/modelList.test.tsx (1) · 모델리스트 컴포넌트 및 기능 테스트 (1) · 테스트 왜 안됨?
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
cypress와 함께 사용하면되는건가요?
Jest와 Cypress중에 하나만 사용 하라고 하셨는데storybook은 Jest와 함께 사용하거나 Cypress와 함께 사용해도 될까요?
-
미해결따라하며 배우는 TDD 개발 [2023.11 업데이트]
res.status(201) 부분에서 typeerror가 발생합니다
에러메시지: TypeError: Cannot read properties of undefined (reading 'status')res.status(200); 해당 코드에서 발생하는 에러인데 강사님이 코드돌리실때는 해당 에러가 발생하지 않는데 제 pc에서는 왜 에러가 발생하는지 잘 모르겠습니다...코드는 강의에서 입력하신 그대로 따라서 했습니다
-
미해결따라하며 배우는 TDD 개발 [2023.11 업데이트]
따라하며 배우는 TDD 개발 [2023.11 업데이트] 강의 질문
따라하며 배우는 TDD 개발 [2023.11 업데이트]2023.11 업데이트라고 되어 있는데, 이게 업데이트 반영 된건가요?
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
test was not wrapped in act관련 질문
안녕하세요. 리액트 테스트 관련 좋은 강의를 제공해주셔서 감사합니다.수업 듣고 테스트 코드를 작성 시에 console.error로 wrapped in act 오류가 표시되어 문의드리게 되었습니다.여러 질문들도 찾아보고... 구글링도 해보며 방안을 찾아서 테스트코드가 성공하는 것 까지는 봤으나, 로그에 첨부드리는 이미지와 같이 표시되어지고 있습니다... useEffect에서 state변경시에 발생되는 것 같은데.. 이부분은 어떻게 처리해야할가요..?ㅠ 며칠을 찾아보고.. 제공해주신 소스코드도 확인해봤지만... 다른 부분이 없어 문의드립니다.(추가로.. 첨부 주신 코드의 리액트버전을 제가 구성하는 버전으로 구성 후 테스트 진행 시에 저와 동일한 결과가 나오는 것을 확인했습니다.)감사합니다.
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
공유소스 실행시 에러 문의 드립니다~
안녕하세요 다름이 아니라 공유해 주신 소스를 기반으로 코드 리포지토리: https://github.com/things-not-learn-from-bootcamp/form-practice/tree/use-reducer-fancy-typing 의 소스를 실행 시켜 보았는데요 위 와 같은 에러가 계속 발생해서요 아무리 구글 검색을 해도 해결이 안되어 문의 드립니다.또 한가지 더 문의 부탁드립니다 위 동일한 레파지토리 소스를 실행시켰을 빌드해서 실행시켰을 때 위 처럼 빨간줄이 생겨서요 좀처럼 이해가 안되어서 같이 문의 드립니다.바쁘신데 죄송하면 문의 부탁드립니다.감사합니다.
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
[섹션 3. Form 컴포넌트로 배우는 실전 기술] 강좌의 소스를 부탁드립니다.
안녕하세요 저는 리액트만 4년차 개발자인데요.. 기존에 리액트 강좌를 무지 많이 수강했음에도 아직도 많이 부족하다 싶어서 강사님의 강좌를 듣게 되었는데 많은 도움이 되고 있어서 너무 감사합니다. 참고로 아래와 같은 과정을 수상신청을 아래와 같이 했습니다. 부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편부트캠프에서 알려주지 않는 것들 (리액트) 1편클론코딩에서 알려주지 않는 것들 (시스템 이론과 DB) 1편실전 연습으로 익히는 고급 타입스크립트 기술 다만 부탁이 있어서요 다름이 아니라 좀더 세심하게 코드를 보구 싶어서요혹시 강좌중 부트캠프에서 알려주지 않는 것들 (리액트) 1편 에서 섹션 3. Form 컴포넌트로 배우는 실전 기술 강좌의 소스를 과정별로 브랜치로 구분한 레파지토리는 없는지 해서요..강좌별로 들으면서 분석하면 많은 도움이 될거 같아서 문의 드립니다.정 안되면 최종 소스라도 부탁드립니다. 위에 강좌 신청을 좋게 봐 주셔서 부탁드립니다.공개가 힘드시면 메일이라도 부탁드리면 안될런지요? manhattansky73@gmail.com 입니다.감사합니다.
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
안녕하세요! 로딩 상태 테스트에 관련된 질문입니다.
제 나름대로 강의를 응용해서 테스트를 짜보려고 강의 시점과 다른 userEvent 버전을 쓰고 있기는 하는데요. 로딩 상태를 테스트할때 마치 로딩 상태를 건너뛰고 바로 리스폰스를 받은 듯이 작동하고 있습니다.... 혹시 userEvent 버전이 달라서 동작이 달라진걸까요? 강의와 코드 내용이 조금 달라진 것에 대한 질문이라 죄송합니다만 아무리 찾아도 이유를 모르곘네요..ㅠㅠㅠimport { screen, render } from '@testing-library/react'; import App from './App'; import userEvent from '@testing-library/user-event'; describe('MainPage', () => { it('should change page when click buttons', async () => { const user = userEvent.setup(); render(<App />); const americaInput = await screen.findByRole('spinbutton', { name: /america/i, }); await user.clear(americaInput); await user.type(americaInput, '2'); const englandInput = await screen.findByRole('spinbutton', { name: /england/i, }); await user.clear(englandInput); await user.type(englandInput, '1'); const dinnerCheckbox = await screen.findByText(/dinner/i); await user.click(dinnerCheckbox); const orderButton = screen.getByRole('button', { name: '주문하기' }); await user.click(orderButton); const summeryHeading = screen.getByRole('heading', { name: '주문 확인' }); expect(summeryHeading).toBeInTheDocument(); const productHeading = screen.getByRole('heading', { name: '여행상품: 3000', }); expect(productHeading).toBeInTheDocument(); const americaLi = screen.getByText('2 America'); const englandLi = screen.getByText('1 England'); expect(americaLi).toBeInTheDocument(); expect(englandLi).toBeInTheDocument(); const optionHeading = screen.getByRole('heading', { name: '옵션: 500' }); const dinnerLi = screen.getByText('Dinner'); expect(optionHeading).toBeInTheDocument(); expect(dinnerLi).toBeInTheDocument(); const confirmCheckbox = screen.getByRole('checkbox'); const submitButton = screen.getByRole('button'); await user.click(confirmCheckbox); await user.click(submitButton); const loading = screen.getByText(/loading/i); expect(loading).toBeInTheDocument(); const completeDiv = await screen.findByRole('heading', { name: '주문이 성공했습니다!', }); const subHeadingDiv = await screen.findByRole('heading', { name: '지금까지 모든 주문', }); const loadingAfterResponse = screen.queryByText(/loading/i); expect(completeDiv).toBeInTheDocument(); expect(subHeadingDiv).toBeInTheDocument(); expect(loadingAfterResponse).not.toBeInTheDocument(); const priceDiv = await screen.findByText('3500', { exact: false }); expect(priceDiv).toBeInTheDocument(); const backBtn = await screen.findByRole('button'); await user.click(backBtn); const newAmericaInput = await screen.findByRole('spinbutton', { name: /america/i, }); expect(newAmericaInput).toBeInTheDocument(); expect(newAmericaInput).toHaveValue(0); }); });
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
강의 관련 내용 github 업로드 질문
안녕하세요 이번에 '따라하며 배우는 React Testing' 강의를 수강중인 박동준이라고 합니다. 이번 강의에서 여행상품 앱 만들기 파트에서 진행하는 방법들을 정리하여 개인 포트폴리오로서 활용하고 싶습니다.모든 소스코드를 올리는것이 아니라, 방법적인 부분들을 정리하고 회원가입 또는 게시글 작성 및 댓글 등 간단한 CRUD 로직으로 배운 개념을 적용하여 코드 및 방법들에 대해서 올리고자 합니다.혹시 이런 방법으로 제 개인 github에 업로드 해도 되는지 궁금합니다!
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
이미지가 안보인다 하셔서 다시 질문드립니다.
안녕하세요 선생님!말씀 주신대로 7-6강 보고 왔지만... 혼자서는 문제의 원인 파악이 힘들어서 다시 재질문 드립니다 ㅠㅠ로그를 확인해 보니 calculate.test.js에서 Fail이 발생되고 있지만, 원인 파악은 아직 못한 상태입니다 ㅠㅠ 레포지토리 주소도 같이 올려드립니다! PASS src/pages/OrderPage/tests/Type.test.js (7.469 s) FAIL src/pages/OrderPage/tests/Calculate.test.js (7.513 s) ● Console console.error Warning: An update to Type inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act at fn (D:\www\react-shop-test\src\pages\OrderPage\Type.js:8:17) 17 | try { 18 | const response = await axios.get(`http://localhost:5000/${orderType}`); > 19 | setItems(response.data); | ^ 20 | } catch (err) { 21 | setError(true); 22 | } at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (node_modules/react-dom/cjs/react-dom.development.js:60:7) at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9) at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5) at setItems (node_modules/react-dom/cjs/react-dom.development.js:17527:7) at loadItems (src/pages/OrderPage/Type.js:19:7) ● update product's total when products change expect(element).toHaveTextContent() Expected element to have text content: 0 Received: 총 가격: 6 | 7 | const productsTotal = screen.getByText("총 가격:", { exact: false }); > 8 | expect(productsTotal).toHaveTextContent("0"); | ^ 9 | 10 | // const americaInput = await screen.findByRole("spinbutton", { 11 | // name: "America", at Object.<anonymous> (src/pages/OrderPage/tests/Calculate.test.js:8:25) PASS src/App.test.js (7.781 s) ● Console console.error Warning: An update to Type inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act at fn (D:\www\react-shop-test\src\pages\OrderPage\Type.js:8:17) at div at div at OrderPage at div at App 17 | try { 18 | const response = await axios.get(`http://localhost:5000/${orderType}`); > 19 | setItems(response.data); | ^ 20 | } catch (err) { 21 | setError(true); 22 | } at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (node_modules/react-dom/cjs/react-dom.development.js:60:7) at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9) at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5) at setItems (node_modules/react-dom/cjs/react-dom.development.js:17527:7) at loadItems (src/pages/OrderPage/Type.js:19:7) console.error Warning: An update to Type inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): act(() => { /* fire events that update state */ }); /* assert on the output */ This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act at fn (D:\www\react-shop-test\src\pages\OrderPage\Type.js:8:17) at div at div at div at OrderPage at div at App 17 | try { 18 | const response = await axios.get(`http://localhost:5000/${orderType}`); > 19 | setItems(response.data); | ^ 20 | } catch (err) { 21 | setError(true); 22 | } at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30) at error (node_modules/react-dom/cjs/react-dom.development.js:60:7) at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9) at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5) at setItems (node_modules/react-dom/cjs/react-dom.development.js:17527:7) at loadItems (src/pages/OrderPage/Type.js:19:7) Test Suites: 1 failed, 2 passed, 3 total Tests: 1 failed, 4 passed, 5 total Snapshots: 0 total Time: 13.137 s Ran all test suites related to changed files.👇 기존 질문https://www.inflearn.com/questions/985742
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
Test Fail이 발생합니다 ㅠㅠ
현재 섹션5까지 수강 완료한 상태인데 계속 Fail이 발생합니다 ㅠㅠ처음엔 됐었는데 갑자기 안되더라구영 ㅠㅠ 검색을 해봐도 뭐가 문제인지 파악하기 힘들어서 질문 드립니다!어떻게 해결하면 좋을까요?
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
마지막 onSubmit 에러체크 문제
에러체크할 때 나머지값이 없어도 submit이 되는 문제가 있습니다.<InfoContext.Provider value={{ value: info, setValue: setInfo, error, setError: (e) => setError({...error, ...e}) }}> <Form onSubmit={onSubmit}> <TextField source="name" label="이름" validate={[minLength(3), maxLength(6)]} /> <TextField source="password" label="패스워드" validate={[minLength(6), maxLength(12)]} /> <CheckboxField source="confirm" label="위 내용이 제출됩니다 동의하십니까?" validate={[checked]} /> </Form> </InfoContext.Provider>위 코드에서 setError update해주는 로직을 // before setError: (e) => setError({...error, ...e}) // after setError: (e) => setError(prev => ({...prev, ...e}))아래와 같은 형식으로 바꿔주면, 리팩토링 이전과 같이 동작을 하게됩니다.batch의 문제인지, 불변성의 문제인지 정확히 모르겠네요. 설명해주시면 감사감사!
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
코드샌드박스 주소
강의하시는 예제를 코드샌드박스에서 열고싶은데 링크가 어디있나요??
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
test 코드 작성시 질문
vite를 사용하고 있으며 현재 촐더 구조입니다.현재 jest.setup.ts 파일내용입니다. (챗 gpt에게 물어본 결과 setupTest.ts로 바꿔야한다는 답변을 받았지만 꼭 바꿔야하는지 잘모르겠습니다.)import "@testing-library/jest-dom" import { server } from "./src/mocks/server" beforeAll(() => server.listen()) afterEach(() => server.resetHandlers()) afterAll(() => server.close()) msw를 사용 하기위해 필요한 설정을 해놓았습니다.다음은 테스팅을 위한 컴포넌트 입니다.import axios from "axios" import React, { useEffect, useState } from "react" const Direction: React.FC = () => { const [data, setData] = useState<any>({}) const [isLoading, setIsLoading] = useState(true) useEffect(() => { void (async () => setData(await (await axios("https://jsonplaceholder.typicode.com/todos/1")).data))() setIsLoading(false) }, []) return ( <> {isLoading ? ( <div>loading...</div> ) : ( <ul> <li>{data.id} / </li> <li>{data.title} /</li> <li>{data.userId} /</li> </ul> )} </> ) } export default Direction 보시는 것처럼 데이터를 불러와서 화면에 표시하는 컴포넌트 입니다. 다음은 테스트 케이스 입니다.import { render, screen } from "@testing-library/react" import Direction from "." test("Direction 컴포넌트가 정상적으로 렌더링되는지 테스트", async () => { render(<Direction />) const result = await screen.findAllByRole("listitem") expect(result).toHaveLength(3) })해당 코드를보시면 간단해서 에러없이 깔끔하게 성공합니다.하지만 프로젝트에서 swr을 사용하기로 했는데 여기서 문제가 발생합니다.import React from "react" import useSWR from "swr" const Direction: React.FC = () => { const { isLoading, data } = useSWR("https://jsonplaceholder.typicode.com/todos/1") return ( <> {isLoading ? ( <div>loading...</div> ) : ( <ul> <li>{data.id} / </li> <li>{data.title} /</li> <li>{data.userId} /</li> </ul> )} </> ) } export default Direction 컴포넌트를 swr을 사용하는 방식으로 바꾸고 테스트를 실행해보면 findAllByRole에서 listitem을 찾을수 없다는 에러가 발생합니다.swr의 특성인거같긴한데 도무지 해결방안이 떠오르지 않습니다.react-query나 swr같은 캐싱라이브러리를 사용하면서 msw를 사용하여 테스트를 하고 싶은데 따로 설정해야하는 것들이나 권장되는 코드 작성 방식이 따로 있나요?그것이아니라면 어떤부분을 수정해야 제대로 작동할까요?
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
스타일 컴포넌트 테스트 방법
강의에선 일반 html/css를 사용하고 data-testid를 사용해 엘리먼트를 선택하는데styled-component를 사용한다면 어떤 방식으로 선택하고 테스트하는게 권장되는 방법일까요?
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
msw 에러
강의를 보다 msw부분에서 에러가 발생합니다. 폴더구조는 이런식이고 handler와 server의 ts파일입니다.setupTests.ts파일입니다 App컴포넌트 입니다 문제의 테스트 코드입니다.강의에서 사용하신 대로 비슷하게 작성하고 에러가 발생할 부분도 제눈에는 보이진 않는데위와같은 에러가 발생하여 옵셔널 체이닝 을 사용하면이런 에러가 발생하네요.npm test가아닌 npm start로 실행시켜 봤을때에는 전혀 이상이 없는데 테스트를 실행시키면 에러가 발생합니다.서버설정부분이나 핸들러부분이 잘못돼었나 싶어서 찾아보았지만 그부분은 이상이 없는것같고app컴포넌트를 다른 방식으로 작성해도 계속에러가 발생합니다.어떤부분이 잘못된부분이고 어떤 해결방안이있을까요?
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
toHaveTextContent 에러
안녕하세요.'context wrapper 추가로 에러 제거하기' 강의에서 발생한 에러가 해결되지 않아 질문 드립니다.https://www.inflearn.com/questions/736423/tohavetextcontent-%EC%97%90%EC%84%9C-%EC%97%90%EB%9F%AC%EA%B0%80-%EC%9E%90%EA%BE%B8-%EB%82%98%EB%8A%94%EB%8D%B0-%EC%95%84%EB%AC%B4%EB%A6%AC-%EC%B0%BE%EC%95%84%EB%8F%84-%EC%9E%98-%EB%AA%A8%EB%A5%B4%EA%B2%A0%EC%8A%B5%EB%8B%88%EB%8B%A4이 글과 동일한 에러가 계속 발생하는데, 이 질문자분이 답글로 남겨주신 코드로 수정해보아도 해결이 되지 않습니다. 어디서 문제가 발생한 건지 강의를 다시 보고 또 봐도 찾기가 어려워 깃허브 주소 남깁니다. 감사합니다.● update product's total when products change expect(element).toHaveTextContent() Expected element to have text content: 1000 Received: 총 가격: 0 16 | userEvent.clear(americaInput); 17 | userEvent.type(americaInput, "1"); > 18 | expect(productsTotal).toHaveTextContent("1000"); | ^ 19 | }); 20 | at Object.<anonymous> (src/pages/OrderPage/test/calculate.test.js:18:25) https://github.com/daeunleeeee/react-shop-test
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
TDD - Green, Red, Refactor
안녕하세요. TDD의 Green, Red, Refactor 파트(9:40)에서리팩터링을 진행하시면서 onPageNumberClick 함수를 useCallback으로 감싸서 렌더링이 다시 될때 이 함수가 두번 생성되지 않도록 한다고 하셨는데이 부분이 잘 이해가 가지 않아서요. 설명해주신걸로 유추해보면 useCallback으로 감싸면 함수가 한번만 생성되는 것 같은데 useCallback을 사용했을때와 사용하지 않았을 때 차이에 대해서 조금 더 설명해주실 수 있을까요?
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
msw안돼는사람
https://junhyunny.github.io/react/jest/module-import-error-on-jest/ 여기랑https://velog.io/@noyo0123/jest-test%EC%97%90%EC%84%9C-import-%EB%A5%BC-%EB%AA%BB-%EC%93%B0%EB%84%A4%EC%9A%94-pik230v1hp이거참고하세요
-
미해결따라하며 배우는 TDD 개발 [2023.11 업데이트]
테스트를 위한 데이터베이스를 생성해야하나요?
운영 단계에서의 데이터베이스와개발 단계에서의 데이터베이스를 분리하여 운영한다고 하면,테스트를 위한 데이터베이스도 만들어야할까요?