测试期间未加载 Jest Mocked 数据

Question

我有一个组件可以从我为测试模拟的 API 加载数据，但由于测试找不到包含数据的元素，因此它没有加载。

组件：

import { useDispatch, useSelector } from "react-redux";
import { useState, useEffect, useCallback } from "react";

import { businessDataActions } from "../store/business-data";
import { fetchBusinessListing } from "../services/business-listing";

import styles from "../styles/BizCard.module.css";
import BizCardItem from "./BizCardItem";

  const BizCard = (props) => {
  const dispatch = useDispatch();  
  const [listing, setListing] = useState([]);  

  //load all listing
  const fetchListing = useCallback(async () => {
    dispatch(businessDataActions.setIsLoading({ isLoading: true }));    

    const ListingService = await fetchBusinessListing();
    if (ListingService.success) {
      setListing(ListingService.data);
    } else {
      dispatch(
        businessDataActions.setNotify({
          severity: "error",
          message: "Problem when fetching listing.",
          state: true,
        })
      );
    }
    dispatch(businessDataActions.setIsLoading({ isLoading: false }));
  }, []);

  useEffect(() => {
    fetchListing();    
  }, []);

  const businessList = listing.map((item) => (
    <BizCardItem
      key={item.key}
      id={item.id}
      name={item.name}
      shortDescription={item.shortDescription}
      imageUrl={item.imageUrl}
    />
  ));

  return (
    <div className={styles.grid} role="grid">
      {businessList}
    </div>
  );
};

测试文件：

const bizListing = [
  ...some fake data
];
jest.mock("../../services/business-listing", () => {
  return function fakeListing() {
    return { success: true, data: bizListing };
  }
});

afterEach(cleanup);

describe('BizCard', () => {
    test("loading listing", async () => {      
      useSession.mockReturnValueOnce([null, false]);      
      
      await act(async () => {render(        
          <BizCard />        
      )});      
      
      const itemGrid = await screen.findAllByRole("gridcell");
      expect(itemGrid).not.toHaveLength(0);
    });
});

服务/业务列表：

export const fetchBusinessListing = async() => {    
    try {      
      const response = await fetch(
        "/api/business"
      );
      if (!response.ok) {
        throw new Error('Something went wrong!');
      }
      const data = await response.json();
      const loadedBusiness = [];
      
      for (const key in data) {
        let imgUrl =
          data[key].imageUrl !== "undefined" && data[key].imageUrl !== ""
            ? data[key].imageUrl
            : '/no-image.png';
            
          loadedBusiness.push({
            key: data[key]._id,
            id: data[key]._id,
            name: data[key].businessName,
            shortDescription: data[key].shortDescription,
            imageUrl: imgUrl,            
          });
      }      
      return { success: true, data: loadedBusiness };  
    } catch (error) {
      return ({success: false, message: error.message});
    }
}

使用这些返回执行的测试：

TypeError: (0 , _businessListing.fetchBusinessListing) is not a function

      48 |     // }
      49 |     
    > 50 |     const ListingService = await fetchBusinessListing();

    Unable to find role="gridcell"

当我使用浏览器时，我可以确认网格单元已呈现。 谁能解释一下我的问题

Answer 1

设法自己解决问题，问题在于模拟：

jest.mock("../../services/business-listing", () => {
    return {
        fetchBusinessListing: jest.fn(() => { return { success: true, data: bizListing }}),
    }
});