Empty JEST test taking over 200 seconds - jestjs

Question

I have a two test suites. One actually makes API calls, and seems to run in about 20 seconds. Other one, is literally empty and takes over 248 seconds. Two of the tests are todo, and one had some implementation that I commented out. It's still taking forever. Why is this?
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');
});
Here is my jest config defined inside package.json
"jest": {
"transform": {
"^.+\\.[t|j]sx?$": "babel-jest"
},
"testEnvironment": "jsdom"
},
I need to use jsdom because there is a window.location in existing code.
Update: Adding component code
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;