따라하며 배우는 리액트 테스트 [2023.11 업데이트]대시보드

App.js파일을 refresh 하면 이렇게 error가 뜨네요 ㅜㅜ 해결책을 아무리 찾아봐도 나오질 않습니다 . .

[1] 문의내용(총 2건)Jest의 테스트 시간을 단축할 수 있는 방법Jest의 테스트 시간이 증가하는 원인React 프론트코딩시 jest를 항상 켜두고 작업하는게 좋을까요? [2]현재 상황 안내섹션 2의 "간단한 앱 만들며 테스트"를 실습하고 있습니다.테스트코드의 실행이 저의 경우 3초(최대 5초)가 소요되는 반면, 강의 영상은 길어야 2초 정도로 속도가 차이가 나는거 같습니다. 실제 프로젝트에서 테스트코드의 양이 늘어날수록 비례하여 jest 소요시간이 늘어날 것이고, 개발시간의 장기화등 스케쥴측면에서 문제가 될 수 있지 않을까 싶어 문의를 드립니다. 

질문있습니다. 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)     · 테스트 왜 안됨?    

안녕하세요. 리액트 테스트 관련 좋은 강의를 제공해주셔서 감사합니다.수업 듣고 테스트 코드를 작성 시에 console.error로 wrapped in act 오류가 표시되어 문의드리게 되었습니다.여러 질문들도 찾아보고... 구글링도 해보며 방안을 찾아서 테스트코드가 성공하는 것 까지는 봤으나, 로그에 첨부드리는 이미지와 같이 표시되어지고 있습니다... useEffect에서 state변경시에 발생되는 것 같은데.. 이부분은 어떻게 처리해야할가요..?ㅠ 며칠을 찾아보고.. 제공해주신 소스코드도 확인해봤지만... 다른 부분이 없어 문의드립니다.(추가로.. 첨부 주신 코드의 리액트버전을 제가 구성하는 버전으로 구성 후 테스트 진행 시에 저와 동일한 결과가 나오는 것을 확인했습니다.)감사합니다.

제 나름대로 강의를 응용해서 테스트를 짜보려고 강의 시점과 다른 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); }); });

안녕하세요 이번에 '따라하며 배우는 React Testing' 강의를 수강중인 박동준이라고 합니다. 이번 강의에서 여행상품 앱 만들기 파트에서 진행하는 방법들을 정리하여 개인 포트폴리오로서 활용하고 싶습니다.모든 소스코드를 올리는것이 아니라, 방법적인 부분들을 정리하고 회원가입 또는 게시글 작성 및 댓글 등 간단한 CRUD 로직으로 배운 개념을 적용하여 코드 및 방법들에 대해서 올리고자 합니다.혹시 이런 방법으로 제 개인 github에 업로드 해도 되는지 궁금합니다!

안녕하세요 선생님!말씀 주신대로 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

삭제된 글입니다

삭제된 글입니다

현재 섹션5까지 수강 완료한 상태인데 계속 Fail이 발생합니다 ㅠㅠ처음엔 됐었는데 갑자기 안되더라구영 ㅠㅠ 검색을 해봐도 뭐가 문제인지 파악하기 힘들어서 질문 드립니다!어떻게 해결하면 좋을까요? 

강의에선 일반 html/css를 사용하고 data-testid를 사용해 엘리먼트를 선택하는데styled-component를 사용한다면 어떤 방식으로 선택하고 테스트하는게 권장되는 방법일까요?

강의를 보다 msw부분에서 에러가 발생합니다. 폴더구조는 이런식이고 handler와 server의 ts파일입니다.setupTests.ts파일입니다 App컴포넌트 입니다 문제의 테스트 코드입니다.강의에서 사용하신 대로 비슷하게 작성하고 에러가 발생할 부분도 제눈에는 보이진 않는데위와같은 에러가 발생하여 옵셔널 체이닝 을 사용하면이런 에러가 발생하네요.npm test가아닌 npm start로 실행시켜 봤을때에는 전혀 이상이 없는데 테스트를 실행시키면 에러가 발생합니다.서버설정부분이나 핸들러부분이 잘못돼었나 싶어서 찾아보았지만 그부분은 이상이 없는것같고app컴포넌트를 다른 방식으로 작성해도 계속에러가 발생합니다.어떤부분이 잘못된부분이고 어떤 해결방안이있을까요?

안녕하세요.'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   

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이거참고하세요

선생님 안녕하세요아무리 봐도 오류 이유를 모르겠어서 질문드립니다.제 오류는 아래와 같습니다. (코드상 에러난 부분 ✅ 했습니다)> TestingLibraryElementError: Unable to find an element with the text: /loading/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. // CompletePage.js import axios from "axios"; import React, { useEffect, useContext, useState } from "react"; import ErrorBanner from "../../components/ErrorBanner"; import { OrderContext } from "../../contexts/OrderContext"; function CompletePage({ setStep }) { const [OrderDatas, , resetOrderDatas] = useContext(OrderContext); const [orderHistory, setOrderHistory] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(false); useEffect(() => { orderCompleted(OrderDatas); }, [OrderDatas]); const orderCompleted = async (OrderDatas) => { try { let response = await axios.post( "http://localhost:5001/order", OrderDatas ); setOrderHistory(response.data); setLoading(false); } catch (error) { setError(true); } }; if (error) { return <ErrorBanner message="에러가 발생했습니다." />; } const orderTable = orderHistory.map((item) => ( <tr key={item.orderNumber}> <td>{item.orderNumber}</td> <td>{item.price}</td> </tr> )); const handleClick = () => { resetOrderDatas(); setStep(0); }; if (loading) { return <div>loading</div>; ✅ } else { return ( <div style={{ textAlign: "center" }}> <h2>주문이 성공했습니다.</h2> <h3>지금까지 모든 주문</h3> <table style={{ margin: "auto" }}> <thead> <tr> <th>주문 번호</th> <th>주문 가격</th> </tr> </thead> <tbody>{orderTable}</tbody> </table> <button onClick={handleClick}>첫페이지로</button> </div> ); } } export default CompletePage; //App.test.js import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import App from "./App"; test("From order to order completion", async () => { render(<App />); const event = userEvent.setup(); const americaInput = await screen.findByRole("spinbutton", { name: "America", }); await event.clear(americaInput); await event.type(americaInput, "2"); // England 여행 상품 3개 추가합니다. const englandInput = await screen.findByRole("spinbutton", { name: "England", }); await event.clear(englandInput); await event.type(englandInput, "3"); // insurance 옵션체크 const insuranceCheckbox = await screen.findByRole("checkbox", { name: "Insurance", }); await event.click(insuranceCheckbox); //모든 주문을 한 이후 주문 버튼 클릭! const orderButton = screen.getByRole("button", { name: "주문", }); await event.click(orderButton); ////////// 주문확인페이지 /////// const summaryHeading = screen.getByRole("heading", { name: "주문 확인" }); expect(summaryHeading).toBeInTheDocument(); const productHeading = screen.getByRole("heading", { name: "여행 상품: 5000", }); expect(productHeading).toBeInTheDocument(); const optionsHeading = screen.getByRole("heading", { name: "옵션: 500", }); expect(optionsHeading).toBeInTheDocument(); expect(screen.getByText("2 America")).toBeInTheDocument(); expect(screen.getByText("3 England")).toBeInTheDocument(); expect(screen.getByText("Insurance")).toBeInTheDocument(); const confirmCheckbox = screen.getByRole("checkbox", { name: "주문하려는것을 확인 하셨나요?", }); await event.click(confirmCheckbox); const confirmOrderButton = screen.getByRole("button", { name: "주문 확인", }); await event.click(confirmOrderButton); //// 주문 완료 //// const loading = screen.getByText(/loading/i); ✅ expect(loading).toBeInTheDocument(); const completeHeader = await screen.findByRole("heading", { name: "주문이 성공했습니다.", }); expect(completeHeader).toBeInTheDocument(); const loadingDisappeared = screen.queryByText("loading"); expect(loadingDisappeared).not.toBeInTheDocument(); const firstPageButton = screen.getByRole("button", { name: "첫페이지로", }); event.click(firstPageButton); const productsTotal = screen.getByText("상품 총 가격: 0"); expect(productsTotal).toBeInTheDocument(); const optionsTotal = screen.getByText("옵션 총 가격: 0"); expect(optionsTotal).toBeInTheDocument(); await waitFor(() => { screen.getByRole("spinbutton", { name: "America" }); }); }); 제가 에러를 이해한 바로는 return 문이 여러 경우로 나뉘어서 그렇다고 생각했습니다. 제대로 이해한게 맞을까요..?( This could be because the text is broken up by multiple elements.)실제로 아래 else return문에 loading을 넣어주니 해결이 되긴 했습니다. 하지만 아래 ✅와 같이 작성해주면 에러가 뜨네요..왜 이러는건지 혹시 아실까요? ㅠㅠif (loading) { return <div>loading</div>; ✅ } else { return ( <div style={{ textAlign: "center" }}> <h2>주문이 성공했습니다.</h2> <h3>지금까지 모든 주문</h3> <table style={{ margin: "auto" }}> <thead> <tr> <th>주문 번호</th> <th>주문 가격</th> </tr> </thead> <tbody>{orderTable}</tbody> </table> <button onClick={handleClick}>첫페이지로</button> </div> ); }선생님 코드를 보고 복붙했는데도 해결이 안되네요.ㅜ  

강사님 안녕하세요 ~~ 늘 잘 듣고 있습니다.복습을 하다 궁금한점이 생겼는데요!Type.test.js에서 Products컴포넌트의 img태그를 변수 productImages로 집어주신걸 보았습니다. 근데 img태그는 Type.js가 아닌 Products.js에 있는건데,그렇담 Products.test.js 파일을 따로만들어 테스트를 해야하는것이 아닌가 하는 궁금증이 생겼습니다.그냥 Type페이지에 Products 컴포넌트가 들어있기 때문에 Type.test.js에 사용한건가요?test("displays product images from server", async () => { render(<Type orderType="products" />); const productImages = await screen.findAllByRole("img", { name: /product$/i, }); expect(productImages).toHaveLength(2); const altText = productImages.map((element) => element.alt); expect(altText).toEqual(["America product", "England product"]); });

화면을 출력할 때, 강사님이 작성하신const ItemComponents = orderType === "products" ? Products : null; const optionItems = items.map((item) => ( <ItemComponents key={item.name} name={item.name} imagePath={item.imagePath} /> )); return <div>{optionItems}</div>; 이 코드와  return ( <div> {orderType === "Products" ? items.map((item) => ( <Products key={item.name} name={item.name} imagePath={item.imagePath} /> )) : null} </div> );제가 익숙하게 사용하는 방식인 이 코드의 차이점이 있을까요?혼자 생각해봐도 차이점을 알 수 없어서 질문 남깁니다성능상의 이점이나 코드를 읽기 수월해진다는 이점인지, 혹은 코드 스타일인지 궁금합니다! :) 좋은 강의 감사합니다!

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 안녕하세요! 강의 너무 잘 듣고 있습니다! 감사해요오류를 잡으려고 노력해봤는데도 잘 안돼서 질문 남깁니다calculate.test.js파일의 toHaveTextContent()부분에서 모두 오류가 나고 있습니다. 선생님이 주신 소스코드와 제 코드를 모두 비교해봤는데 다 똑같더라구요. 제가 인지하지 못한 오류가 있는지 한 번 봐주실 수 있으실까요? 부탁드립니다ㅜ오류 부분calculate.test.jsimport { render, screen } from "../../../test-utils"; import userEvent from "@testing-library/user-event"; import Type from "../Type"; import OrderPage from "../OrderPage"; test("update products total when products change", async () => { render(<Type orderType="products" />); const productsTotal = screen.getByText("상품 총 가격: ", { exact: false }); expect(productsTotal).toHaveTextContent("0"); // 아메리카 여행 상품 한개 올리기 const americaInput = await screen.findByRole("spinbutton", { name: "America", }); userEvent.clear(americaInput); userEvent.type(americaInput, "1"); // 이 상품을 하나 산다는 뜻 expect(americaInput).toHaveTextContent("1000"); }); - Type.jsimport React, { useContext, useEffect, useState } from "react"; import Products from "./Products"; import axios from "axios"; import ErrorBanner from "../../components/ErrorBanner"; import Options from "./Options"; import { OrderContext } from "../../contexts/OrderContext"; const Type = ({ orderType }) => { const [items, setItems] = useState([]); const [error, setError] = useState(false); const [orderDatas, updateItemCount] = useContext(OrderContext); // OrderContext.js의 return [{ ...orderCounts, totals }, updateItemCount]; 을 구조분해 useEffect(() => { loadItems(orderType); }, [orderType]); const loadItems = async (orderType) => { try { let response = await axios.get(`http://localhost:5000/${orderType}`); setItems(response.data); } catch (error) { setError(true); } }; if (error) { return <ErrorBanner message="에러가 발생했습니다" />; } const ItemComonents = orderType === "products" ? Products : Options; const optionItems = items.map((item) => ( <ItemComonents style={{ border: "2px solid red" }} key={item.name} name={item.name} imagePath={item.imagePath} updateItemCount={(itemName, newItemCount) => updateItemCount(itemName, newItemCount, orderType) } /> )); let orderTypeKorean = orderType === "products" ? "상품" : "옵션"; return ( <div> <h2>주문종류</h2> <p>하나의 가격</p> <p> {orderTypeKorean} 총 가격: {orderDatas.totals[orderType]} </p> <div style={{ display: "flex", flexDirection: orderType === "options" && "column", // }} > {optionItems} </div> </div> ); }; export default Type; orderContext.jsimport { createContext, useState, useMemo, useEffect } from "react"; export const OrderContext = createContext(); const pricePerItem = { products: 1000, options: 500, }; function calculateSubtotal(orderType, orderCounts) { let optionCount = 0; for (const count of orderCounts[orderType].values()) { optionCount += count; } return optionCount * pricePerItem[orderType]; } export function OrderContextProvider(props) { const [orderCounts, setOrderCounts] = useState({ products: new Map(), options: new Map(), }); const [totals, setTotals] = useState({ products: 0, options: 0, total: 0, }); useEffect(() => { const productsTotal = calculateSubtotal("products", orderCounts); const optionsTotal = calculateSubtotal("options", orderCounts); const total = productsTotal + optionsTotal; setTotals({ products: productsTotal, options: optionsTotal, total, }); }, [orderCounts]); const value = useMemo(() => { function updateItemCount(itemName, newItemCount, orderType) { const newOrderCounts = { ...orderCounts }; const orderCountsMap = orderCounts[orderType]; orderCountsMap.set(itemName, parseInt(newItemCount)); setOrderCounts(newOrderCounts); } return [{ ...orderCounts, totals }, updateItemCount]; }, [orderCounts, totals]); return <OrderContext.Provider value={value} {...props} />; }  

test.js에서 element.checked 하면 ariaChecked, ariaDisabled 이렇게 aria가 붙은 것이 힌트로 뜨는데 input과 button에 aria-를 붙였더니 화면에선 잘 작동하는데 테스트에 걸리더라고요..<input type="checkbox" aria-checked={checked}FAIL expect(checkbox.ariaChecked).toEqual(false);둘의 차이가 뭐고 어떤 방법이 더 권장되는지 궁금합니다!

위와 같이 .xml파일을 크롬과 엣지 모두 시도에 보았지만 에러가 나네요... ㅠ구글링 해봤지만 정확하게 나온게 없어서 못하고 있습니다. 저 파일을 보려면 어떻게 해야 할까요??참고로 저는 윈도우로 개발하고 있습니다.!!!