49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
컴포넌트 props내려줄때 코드는 어떻게 해야하나요
이런식으로 하위컴포넌트에 useState를 props로 다수 내려주고 있는경우에는 어떻게 해야할까요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
es6 jest 미지원 오류 문의
안녕하세요 강의 잘 듣고 있습니다. 강의를 듣다가 axios를 설치하고 import 하는 과정에서 다음과 같은 문제가 발생했습니다. 구글링을 해보니 jest가 es6를 지원하지 않아서 발생하는 문제라고 하던데 구글링해서 찾아본 방법들은 해결이 되지 않아 문의 드립니다. FAIL src/pages/OrderPage/tests/Type.test.js ● Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers. Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation Details: C:\Users\multicampus\Desktop\projects\react-test-app\react-shop-test\node_modules\axios\index.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module > 1 | import axios from 'axios'; | ^ 2 | import React, { useEffect, useState } from 'react' 3 | import { Products } from './Products'; 4 | at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14) at Object.<anonymous> (src/pages/OrderPage/Type.js:1:1) at Object.<anonymous> (src/pages/OrderPage/tests/Type.test.js:2:1) at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13) at runJest (node_modules/@jest/core/build/runJest.js:404:19)
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
test 여러 개 실행 - fail 발생
안녕하세요. 강의 잘 듣고 있습니다. 강의 듣는 중 질문이 있어 질문남깁니다.react-shop-test > src > pages > OrderPage > tests > calculate.test.js파일을 그대로 복사하고 test.only 부분을 test로 바꾼 후 전체 테스트 돌렸습니다. ● total price of goods and options › total price starts with 0 and Updating total price when adding one product Expected element to have text content: 1000 Received: Total Price: 1500 total price starts with 0 and Updating total price when adding one product에서 위와 같이 금액이 맞지 않는 테스트 fail이 발생하는데 원인을 알 수 있을까요..? ( 나머지는 다 통과합니다. ) test("total price starts with 0 and Updating total price when adding one product", async () => { render(<OrderPage />); const total = screen.getByText("Total Price:", {exact: false}); expect(total).toHaveTextContent("0"); const americaInput = await screen.findByRole("spinbutton", { name: "America", }); userEvent.clear(americaInput); userEvent.type(americaInput, "1"); expect(total).toHaveTextContent("1000"); }); 테스트코드는 이와 같습니다. america 하나를 했으니 1000원이 나와야 올바른 결과일 것 같은데 1500인 결과가 나와 fail 이 납니다. 나머지 테스트케이스에선 발생하지 않아 계산 로직이 잘못된 것 같진 않습니다.test를 여러 개 한꺼번에 실행하면 안되는건가요? 뭔가 앞의 결과가 남아있어서 값의 오류가 발생하는 것 같아서요.테스트를 할 때 .only를 붙여 하나씩만 실행해야 하는건가요..?그렇다면 여러 개의 테스트를 동시에 실행하고 싶을 때는 어떻게 할 수 있을까요? 각 테스트를 파일 분리하여 작성해야 하나요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
useMemo
안녕하세요!강의 잘 들었습니다 : )이번 강의에서 궁금한 점이 있는데요~OrderContext.js에서 resetOrderDatas를 useMemo 바깥에 두셨는데 아래처럼 안에 선언해도 상관없는 건가요? const value = useMemo(() => { function updateItemCount(itemName, newItemCount, orderType) { // ... } const resetOrderDatas = () => setOrderCounts({ products: new Map(), options: new Map(), }); return [{ ...orderCounts, totals }, updateItemCount, resetOrderDatas]; }, [orderCounts, totals]);updateItemCount의 경우는 useMemo안에 있는데 차이가 무엇인지 궁금합니다.updateItemCount는 자주 쓰이는 함수라 그런걸까요..?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
axios 1.1.2 버전 issue ( SyntaxError: Cannot use import statement outside a module)
혹시나 에러가 나신다면, package.json폴더에 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"", "eject": "react-scripts eject" },로 변경 후 test를 종료 후 재 실행시키면 됩니다.방법은 test에서 직접 스크립트 수정하거나 jest.config.js파일을 만들어 moduleNameMapper을 사용하시면 됩니다!참고https://stackoverflow.com/questions/73958968/cannot-use-import-statement-outside-a-module-with-axioshttps://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
2가지 질문사항입니다!
1. findByRole의 namecheckbox를 findByRole로 찾아올 때Insurance라는 이름으로 어떻게 찾는지 궁금합니다.const insuranceCheckbox = await screen.findByRole('checkbox', { name: 'Insurance' }); Options.js 파일에서는 <input type="checkbox" id={`${name} option`} onChange={(event) => { updateItemCount(name, event.target.checked ? 1 : 0); }} />{' '} <label htmlFor={`${name} option`}>{name}</label> id와 htmlFor에는 Insurance option이라고 들어가는데.. 이해가 잘 되지 않습니다..! 2. userEvent.clear() 함수저는 userEvent.clear(HTML객체) 함수가 HTML객체(보통 input, textarea)을 초기화해주는 거라고 이해했는데요! spinbutton은 type을 하기전에 clear를 하는데,왜 checkbox는 click하기 전에 clear를 하지 않는건가요??? type과 click의 차이 인지 아니면 checkbox와 spinbutton의 차이인지 아니면 그 외의 이유가 있는지 궁금합니다!
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
답변내용에 따라 새글로 깃헙 레포 링크 공유드려요!
https://www.inflearn.com/questions/663604위 질문 드렸던 수강생입니다! 요청주신 레포지토리 링크 드려요!그런데, 강의 내용 코드를 공개 레포로 해도 되나요?문제가 된다면 비공개 레포로 초대 드리겠습니다! https://github.com/gaeundev/react-shop-test
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
warning 이 뜨는 이유가 뭔지 모르겠어요..
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-actat Type (C:\git\inflearn\react-shop-test\src\pages\OrderPage\Type.js:8:17) at div at div at OrderPage at OrderContextProvider (C:\git\inflearn\react-shop-test\src\contexts\OrderContext.js:21:43) at div at App19 | try {20 | let response = await axios.get(`http://localhost:5000/${orderType}`); > 21 | setItems(response.data); | ^22 | } catch (error) {23 | setError(true);24 | } 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:7at loadItems (src/pages/OrderPage/Type.js:21:13) 안녕하세요 강사님.react context 강의를 들으면서 테스트를 진행하고 있는데,이런 warning 이 발생합니다. ㅠㅠact라는 wrapper를 감싸주라고 하는데,강의에서는 이런 경고 문구가 안나오는것 같아서..제가 잘못한 부분이 있는건지 도움 부탁드립니다.. test 자체는 다 success가 뜨는데 발생하는 warning 입니다..!
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
강의순서문의
형님 이전 강의보다 이게 먼저인가요? 전강의에서 지금테스트 코드가 보여요
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
안녕하세요 강사님
강의 잘 듣고 있습니다 제가 공부한 내용을 블로그에 항상 정리하는데 해당 강의를 통해서 공부한 내용을출처를 남기고 블로깅해도 괜찮을까요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
Unable to find role="img" and name `/product$/i` 오류가뜹니다 선생님 도와주세요
MSW를 이용한 테스트(상품이미지 가져오기)(2) (2 강의를 듣는데 그대로 따라해봤는데 제목같은 테스팅 오류가 뜹니다 무엇을 의심해야할까요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
eslint 설치 오류
터미널에 이렇게 입력했는데... npm install eslint-plugin-testing-library eslint-plugin-jest-dom --save-dev ------------------------------------- 192 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. 위와 같이 나오고, 설치가 진행되지 않습니다. 어떻게 해야할까요? --------------------------------------------------- yarn으로 설치하니까... 되는데, 이렇게 해도 되나요? $ yarn add --dev eslint-plugin-testing-library yarn add eslint-plugin-jest-dom
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
마이너스 버튼을 테스트할때 toHaveTextContent(1)로 해도 패스가 됩니다.
문자열로 받아서 그런것 같은데 toHaveTextContent(1)로 할 때 실패 하게 하는 매쳐가 있을까요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
MSW 질문입니다
MSW를 사용해 구현하는것이 json-server를 사용하는 것과 비교했을때 갖는 이점이 어떤게 있나요? end to end 테스트를 하지 않고 중간에서 서비스워커가 백그라운드에서 실행하는 형태 라는 이점이 있는건가요? '그렇다면 리소스 낭비를 하지 않는다' 라는 이점이 있는걸까요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
on/off 버튼 질문
현재 테스트 코드 같은 경우에는 on -> off 로 변했을때 각 버튼이 disabled가 되는지를 확인하고 그에 맞는 코드를 작성하는데요. off인 상태에서 on이 됬을 경우에도 테스트하려면 render(<App/>) 후에 disabled 상태를 만들어 줘야 하는데 이 경우의 테스트 코드는 어떻게 작성해야 하나요?
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
주문번호 중복은 혹시 어떤 문제 일까요???
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 테스트 진행때에는 문제가 없었는데 실행 하고 나니까 문제가 생기네요 주문번호와 주문 가격이 2개씩 생성 되는 데 이유를 혼자 찾아보고 있지만 풀리지 않고 있어요!!
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
queryByTest("loading") vs getByTest(/loading/i)
안녕하세요 주문 완료 페이지 테스트 코드 작성중입니다. 여기서 처음 로딩 문구를 가져올 땐 getByText(/loading/i) 사용했고, 두번째 로딩 사라질 땐 queryByText("loading")을 사용했습니다. 1. 두번째에서 queryBy를 사용한 이유가 있을까요? 주문이 성공한 뒤 사라질 엘리먼트이기 때문에 사용한 것인가요? 로딩 문구가 (this is useful for asserting an element that is not present) 에 해당하기 때문인가요? 이런 경우 getByText로 하면 무조건 없다고 나오는건가요? 2. 강의 중 어떤 것은 getByText("총 가격", { exact: false })를 쓰고, 로딩 같은 경우 getByText(/loading/i), 즉 정규식을 사용했습니다. 혹시 로딩에서 정규식을 사용하고 다른데선 그냥 스트링으로 썼던 이유가 있는지요? 정규식 아님 스트링 을 사용할 때의 기준이 있는지요? 감사합니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
"서버에서 데이터 가져올 때 에러 발생 시 처리" 강의에서 질문요
안녕하세요 여행상품 앱 만들기에서 서버에서 데이터 가져올 때 에러 발생 시 처리 강의 보고 있습니다. 테스트 코드 아래 부분에서요. const errorBanner = await screen.findByTestId("error-banner"); 1. 여기서 getByTestId하면 안되더라구요. findByTestId를 하는 이유가 궁금합니다. 2. 이전 강의 쿼리 우선순위에 다르면, ...byRole을 사용해서 찾을 것을 권장한다고 배웠습니다만, 여기서 왜 findByRole을 사용하지 않고, findByTestId 로 찾는지 궁금합니다. ------ // Products.js <img style={{ width: "75%" }} src={`http://localhost:5000/${imagePath}`} alt={`${name} product`} /> // Type.test.js const productImages = await screen.findAllByRole("img", { name: /product$/i, }); expect(productImages).toHaveLength(2); 3. 그리고 위 부분에 대한 질문입니다. findAllByRole에서 두번째 인자 옵션의 name을 주고 엘리먼트를 찾잖아요? 여기서 name이 무엇을 의미하는거죠? html 태그 속성의 name은 아닌것같아보이는데, 예를 들면, Products컴포넌트에서 이미지 태그에는 alt 값에 America product, England product 이런 식으로 들어가잖아요. 근데 어떻게 { name: /product%/i } 로 찾을 수 있는거죠? img태그엔 name이 없었고, alt만 있는데, 어떻게 role 이 img이고 name이 끝이 product로 끝나는 엘리먼트들을 찾을 수 있는거죠? 감사합니다.
- 해결됨따라하며 배우는 리액트 테스트 [2023.11 업데이트]
React-Testing-Library 와 Jest 관계, 차이가 궁금합니다.
RTL, Jest 관계 및 차이가 궁금해서 검색을 했더니 Jest가 RTL 대안이 아니고 상호 보완 관계라고 설명이 있던데요.RTL, Jest 프레임워크 각 각 어떤 역활을 하는지 궁금합니다.
- 미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
프론트엔드 초보 개발자 입장에서 테스팅을 배우는 좋은 강의입니다!
프론트엔드 초보 개발자 입장에서 테스팅을 배울 수 있는 좋은 강의입니다! 여기서 기초를 다지고 실제 프로젝트에서 적용하며 공부하면 좋을 것 같습니다!