空旷的测试需要200秒

Question

我有两个测试套件。实际上，一个人打电话给API，并且似乎在20秒内运行。另一个实际上是空的，需要248秒。其中两个测试是托多（Todo），一个测试有一些我评论的实施。它仍然是永远的。为什么这是？

import { render, waitFor, screen }  from "@testing-library/react";
import MyContent from "./MyContent.js";

describe('MyContent Component', () => {
    it.todo('should call API when search button is clicked');

    it('should render some text when api responds',  () => {
        /*
        render(<MyContent />);
        await waitFor(() => {
            screen.getByText("some text");
        });
        */
    });

    it.todo('should render error message when api fails');
    
});

这是我在软件包内定义的Jest配置。JSON

  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    },
    "testEnvironment": "jsdom"
  },

我需要使用JSDOM，因为现有代码中有一个窗口。

更新：添加组件代码

import React, { useState } from "react";
import { Input } from "@progress/kendo-react-inputs";
import { Label } from "@progress/kendo-react-labels";
import * as Constants from "../common/Constants.js";
import SearchTextBox from "../../components/SearchTextbox/SearchTextbox.js";
import someService from "../../services/someService.js";
import { Update } from "@material-ui/icons";

function MyContent(props) {

    const isThatPage = props.pageIdentifier == Constants.PageIdentifier.thatPage;

    const [eDetailsOutput, seteDetailsOutput] = useState({
        a: null,
        b: null,
        c: null,
        d: null
    });

    const handleChange = (e) => {
        let dataToPush = [];
        dataToPush.push({ key: e.target.name, value: e.target.value });
        if (props.handleChange) {
            props.handleChange(dataToPush);
        }
    };

    const thatInput = {
        q: null,
        w: null,
        eId: null,
        x: null,
        z: props.z
    };

    const handleSearchClick = () => {
        someService.getthatDetailsBya(thatInput)
            .then((response) => {
                let updatedValue = {};
                updatedValue = {
                    a: response?.eDetails.a, 
                    b: response?.eDetails.b, 
                    c: response?.eDetails.c, 
                    d: response?.eDetails.d
                }

                seteDetailsOutput(eDetailsOutput => ({
                    ...eDetailsOutput,
                    ...updatedValue
                }));
            })
            .catch((error) => {
                goToAPIErrorPage(error?.message);
            });
    };

    return (
        <div className="k-form form_margin">
            <div className="k-geo-form">
                <div className="card">
                    <div className="card-item">
                        <div className="row">
                            <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
                                <Label>el Name</Label>
                                {isThatPage ? (
                                    <SearchTextBox
                                        id="z-textbox"
                                        name="z"
                                        value={props.z ?? ""}
                                        handleChange={handleChange}
                                        readOnly={props.isReadOnly}
                                        handleSearchClick={handleSearchClick}
                                    />
                                ) : (
                                    <Input
                                        id="z-textbox"
                                        name="z"
                                        value={props.z ?? ""}
                                        onChange={handleChange}
                                        className={props.isReadOnly ? "readOnlyInput" : ""}
                                        readonly={props.isReadOnly}
                                    />
                                )}
                            </div>
                            <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
                                <Label>a</Label>
                                {isThatPage ? (
                                    <SearchTextBox
                                        id="a-textbox"
                                        name="a"
                                        // value={props.a ?? ""}
                                        value={eDetailsOutput.a ?? "aIII"}
                                        handleChange={handleChange}
                                        readOnly={props.isReadOnly}
                                        handleSearchClick={handleSearchClick}
                                    />
                                ) : (
                                    <Input
                                        id="a-textbox"
                                        name="a"
                                        value={props.a ?? ""}
                                        onChange={handleChange}
                                        className={props.isReadOnly ? "readOnlyInput" : ""}
                                        readonly={props.isReadOnly}
                                    />
                                )}
                            </div>
                            <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
                                <Label>Entity Category Type</Label>
                                <Input
                                    id="b-textbox"
                                    name="b"
                                    // value={props.b ?? ""}
                                    value={eDetailsOutput.b ?? "beee"}
                                    onChange={handleChange}
                                    className={props.isReadOnly ? "readOnlyInput" : ""}
                                    readonly={props.isReadOnly}
                                />
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
                                <Label>Status</Label>
                                <Input
                                    id="Status-textbox"
                                    name="Status"
                                    // value={props.Status ?? ""}
                                    value={eDetailsOutput.c ?? "csssss"}
                                    onChange={handleChange}
                                    className={props.isReadOnly ? "readOnlyInput" : ""}
                                    readonly={props.isReadOnly}
                                />
                            </div>
                            <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
                                <Label>Other Status</Label>
                                <Input
                                    id="OtherStatus-textbox"
                                    name="OtherStatus"
                                    value={props.OtherStatus ?? ""}
                                    onChange={handleChange}
                                    className={props.isReadOnly ? "readOnlyInput" : ""}
                                    readonly={props.isReadOnly}
                                />
                            </div>
                            <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
                                <Label>Some Role</Label>
                                <Input
                                    id="Role-textbox"
                                    name="Role"
                                    value={props.Role ?? ""}
                                    onChange={handleChange}
                                    className={props.isReadOnly ? "readOnlyInput" : ""}
                                    readonly={props.isReadOnly}
                                />
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
                                <Label>Some Type</Label>
                                <Input
                                    id="Type-textbox"
                                    name="Type"
                                    value={eDetailsOutput.d ?? "deeeeee"}                                    
                                    onChange={handleChange}
                                    className={props.isReadOnly ? "readOnlyInput" : ""}
                                    readonly={props.isReadOnly}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default MyContent;