React 16升级至18后测试中render函数返回空div的问题

更新 #

在检查更多测试后，我发现该表现并不一致。部分相似的测试在升级后能正常渲染并运行，但其他测试却返回空div。有人能分析下可能的问题吗？

近期我在工作中将UI项目从React v16升级到了v18，并按建议更新了开发依赖。部分测试运行正常，特别是那些基于路由渲染元素后测试路由和功能的用例，两种测试场景的导入语句一致。

示例组件代码 #

// Sample Component
import React, {useState} from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

export default function MyModal({
show,
message
}) {
if (!show) {
  return null;
}
const [visible, setVisible] = useState(true);

return (
 <Modal
  show={visible}
  data-testid={"myComponent-modal"}
 >
  <Modal.Body>
    {message}
  </Modal.Body>
  <Modal.Footer>
    <Button>Ok</Button>
  </Modal.Footer>
 </Modal
);
}

正常运行的路由测试用例 #

// Test details
const {getByRole} = render(
  <MemoryRouter initialEntries={["/somePath"]}>
   <UserContext.Provider value={value}>
    <Routes>
     <Route
       path="/somePath"
       element={<MyComponent {...props} />}
     />
    </Routes>
   </UserContext.Provider>
  </MemoryRouter>
);

// fill in some form detail, then click submit button, then myModal appears

// Result is everything renders as I expect and test passes.

失败的直接渲染组件测试用例 #

// Test Details
// This is an MRE not my actual test as I can't share that code
import "@testing-library/jest-dom"
import React from "react";
import MyModal from "../../components/MyModal";
import { render, screen } from "@testing-library/react";

const {queryByText} = render(
  <MyModal show={true} message={"Test Message"} />
);
screen.debug();
const modalMessage = queryByText("Test Message");
expect(modalMessage).toBeInTheDocument();


// Result: assertion fails
// screen.debug() returns <body><div /></body>

开发依赖版本 #

@testing-library/dom: "^8.5.0"
@testing-library/jest-dom: "^5.11.10"
@testing-library/react: "^13.4.0"
@testing-library/react-hooks: "^7.0.2"
@testing-library/user-event: "^13.5.0"
react-test-renderer: "^18.2.0"
react-testing-library: "^7.0.1"
jest: "^26.6.3"
jest-cli: "^26.6.3"
jest-junit: "^6.2.1"
jest-mock-axios: "^4.2.1"
jsdom: "11.9.0"

我们还有其他开发依赖，但我认为它们不会影响这些测试。

我尝试过调整开发依赖版本，但没有效果；降级后测试会在React v17环境运行，不符合需求。我尝试调试，但断点未进入组件，直接返回空div。我查阅了博客和帖子，未找到有效解决方案。我还尝试了渲染后等待、用MemoryRouter包裹组件，但都无效。看起来render函数根本没有尝试渲染我的组件。

希望能得到帮助，感谢各位！祝大家编码愉快！

内容的提问来源于stack exchange，提问作者Lights_Legend_ 7276