인프런 커뮤니티 질문&답변

선생님 안녕하세요

아무리 봐도 오류 이유를 모르겠어서 질문드립니다.

제 오류는 아래와 같습니다. (코드상 에러난 부분 ✅ 했습니다)

> 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>
    );
  }

선생님 코드를 보고 복붙했는데도 해결이 안되네요.ㅜ