React Testing Library中userEvent.click触发navigate()警告问题

我通过nock模拟后端请求拉取数据并存入数组，将每个数组项用<Link to="/test">链接包裹，点击链接需跳转至详情页。使用React Testing Library测试该功能时，已通过screen.debug(elem)确认后端数据正确获取且匹配元素存在，但调用userEvent.click(elem)时出现警告：

console.warn
You should call navigate() in a React.useEffect(), not when your component is first rendered.
// 完整错误栈见原输入

若组件使用静态数据而非动态后端数据，测试可正常运行。相关代码如下：

测试文件代码 #

test('renders learn react link', async () => {
    //nock mock requests for backend calls
    render(<App/>);
    let elem;
    await waitFor(() => {            
        elem = screen.getByText("Product Label 1").parentElement.parentElement;
        expect(elem).toBeInTheDocument;            
    });
    screen.debug(elem);
    await userEvent.click(elem);
    screen.debug();       
    await waitFor(async () => {
        let elem2 = await screen.findByText("Lorem Ipsum");
    });
});

数据获取组件（ProductsList）代码 #

const ProductsList = () => {
    const [productsList, setProductsList] = useState([]);
    const [noDataFound, setNoDataFound] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [searchData, setSearchData] = useState([]);
    const [searchParams, setSearchParams] = useSearchParams();
    const [mongoDB, setMongoDB] = useState(null);  
    const context = React.useContext(AppContext);
    const userContext = React.useContext(UserContext);   
    const app = context.app;
    const user = userContext.user;  
    useEffect(() => {
        const getDatabase = async () => {            
            let database = await user?.mongoClient("atlas");            
            setMongoDB( database );         
        }
        user && getDatabase();
    }, [user]);
    useEffect(() => {      
        const getProducts = async () => {
            console.log("calling realm");
            const col =  mongoDB.db("dbname").collection("collectionname");
            const products =  await col.aggregate(
                [
                    {"$skip" : 0 },
                    {"$limit": 12 }
                ]);
            if(!products || products.length === 0 ){
                setNoDataFound(true);
            }else{
                setNoDataFound(false);
            }
            setProductsList(products);
        }
        mongoDB && getProducts();
    }, [searchData, mongoDB, searchParams]);
    useEffect(() => {       
        if(productsList || productsList?.length === 0)
            setIsLoading(false);
    }, [productsList, setProductsList]);
    const getProducts = () => {
        return productsList.map( product => {           
            return (
                <Link to="/test" key={product['product-title']}>
                    <div className="product">                                       
                        <div className="product-title">{product['product-title']}</div>
                    </div>
                </Link>
            )
        });
    }
    return (
        <>              
            {                
                    <div className="products-container">    
                        <div className="products-list">
                            {productsList && productsList.length > 0 && getProducts()}
                        </div>
                    </div> 
            }            
        </>
    );
}

父组件（App）代码 #

function App() {
  return <BrowserRouter>
            <Routes>
                <Route exact path="/" element={<ProductsList />} /> 
                <Route exact path="/test" element={<ProductDetail />} />
            </Routes>
        </BrowserRouter>
}

详情页组件（ProductDetail）代码 #

const ProductDetail = () => {
    return <div>Lorem Ipsum</div>
}

内容的提问来源于stack exchange，提问作者A Singh