Reactjs 在Reaction中测试条件组件

我是第一次try 单元测试. 我想测试渲染模式或对话框的功能，视情况而定.

我看过无数的帖子和视频，但从来没有见过像我这样的 case . 在我的模型中，我看到了Udemy，并实现了马克西米利安·施瓦茨米勒的课程.

这是我引用的一段视频的YouTube链接. https://youtu.be/To2PzUT1lQ4?si=MYC_E_i_S2jafa-z个

这是另一个问题，但这是props ，我没有使用props 条件组件 How to test conditional rendering of components using Jest and Enzyme个

我认为这是最相似的问题，但我很难把它应用到我的 case 中. testing conditional rendering that relies on state using react testing library个

https://medium.com/@manojmukherjee777/react-testing-library-portal-modal-b05aaeb5dda7

《测试顺序》

1. 呈现FetchRenderTest

2. 点击"测试开始"按钮

3. 正在运行FETCHMOCK

4. 假设对响应的请求或通信失败. 因此将isError更改为True

5. 渲染Errormodal.tsx&lt；-我不知道如何处理此部分. (再解释一遍-错误模式是如上所述出现在屏幕上的模式或对话.)

6. "错误对话框关闭"按钮正在验证渲染

我的代码在这里

FetchRenderTest.tsx

import React, { useState, Fragment } from "react";

import ErrorModal from "./UI/ErrorModal";

function FetchRenderTest() {
  const [isError, setIsError] = useState(false);
  const errorHandler = () => {
    setIsError(false);
  };

  const confirmHandler = async () => {
    let domain = window.location.hostname;
    try {
      const response = await fetch("<this is url>", {
        method: "PUT",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({ SendData: "test" }),
      });

      if (response.status === 200) {
        return;
      } else {
        setIsError(true);
        return;
      }
    } catch (error) {
      setIsError(true);
    }
  };
  return (
    <>
      {isError && <ErrorModal role="dialog" title="Modal, Dialog Test" message="" onConfirm={errorHandler} />}
      <div>
        <button onClick={confirmHandler}> Testing Start</button>
      </div>
    </>
  );
}

export default FetchRenderTest;

ErrorModal.tsx

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import PopupDragControl from "./PopupDragControl";
import Button from "./Button";
import classes from "./ErrorModal.module.css";

const ErrorModalOverlay = (props: any) => {
  return (
    <div>
      <div className={classes.backdrop} />
      <PopupDragControl>
        <header className={classes.header}>
          <h2>{props.title}</h2>
        </header>
        <div className={classes.content}>
          <p>{props.message}</p>
        </div>
        <footer className={classes.action}>
          <Button onClick={props.isConfirm}> Error dialog close </Button>
        </footer>
      </PopupDragControl>
    </div>
  );
};

const portalElement = document.getElementById("overlays"); <- I tried the "root" 
const ErrorModal = (props: any) => {
  const { title, message, onConfirm } = props;
  if (!portalElement) {
    return null;
  }
  const messageText = message ? message.result : null;
  const errorModalElements = ReactDOM.createPortal(<ErrorModalOverlay title={title} message={messageText} isConfirm={onConfirm}></ErrorModalOverlay>, portalElement);

  return <Fragment>{errorModalElements}</Fragment>;
};

export default ErrorModal;

Button.tsx

const Button = (props : any) => {
  return (
    <button
      type={props.type || "button"}
      className={`${classes.button} ${props.className}`}
      onClick={props.onClick}
      disabled={props.disabled}
    >
      {props.children}
    </button>
  );
};

export default Button;

和测试代码 FetchRenderTest.test.tsx

import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";

import FetchRenderTest from "./FetchRenderTest";

test("renders learn react link", async () => {
  global.fetch = jest.fn().mockRejectedValueOnce({
    json: jest.fn().mockRejectedValueOnce({ success: true }),
    ok: true,
    status: 500,
  });

  render(<FetchRenderTest />);

  fireEvent.click(screen.getByText(/Testing Start/i, { exact: false }));

  await waitFor(() => {
    expect(global.fetch).toHaveBeenCalledWith("<this is url>", {
      method: "PUT",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({ SendData: "test" }),
    });
  });
fireEvent.click(screen.getByText(/Error dialog close/i, { exact: false }));
});

coverlage image个

从其中一次try 中得到的 idea Reaction的默认设置此外，不是所有渲染的通道 渲染到.

我猜问题出在id上，所以我将其全部修改为根，但它仍然无法测试.

我用谷歌查找了所有常用的方法，但它不适合我的情况.

搜索方法可能不是很好.

在这种情况下，如果您必须单独测试每个组件，请让我知道