我如何在React和测试库中的自定义挂钩上模拟数据

Question

我有一个组件使用高级挂钩，已经测试了高级钩子，还可以，但是我不知道如何测试使用此挂钩的组件，并使用模拟数据进行测试。

钩子测试：

import { renderHook, act } from "@testing-library/react-hooks";
import {
  HookProvider,
  useHook
} from "hooks/useHook";
import { render } from "tests/test-utils";

export const wrapper = ({ children }) => (
  <HookProvider>
    {children}
  </HookProvider>
);

describe("Should advanced hook works", () => {
  it("Should hook has initial states", () => {
    const { result } = renderHook(() => useHook());
    expect(result.current.selectedProducts).toStrictEqual([]);
  });

  it("Test change states", async () => {
    const { result } = renderHook(() => useHook(), {
      wrapper
    });

    act(() => {
      result.current.setSelectedProducts([{_id: ""a14da5", title: "product test", description: "description of product test"}]);
    });

    expect(result.current.selectedProducts[0]._id).toBe("a14da5");
  });
});

组件测试：

import { renderHook, act } from "@testing-library/react-hooks";

import {
  HookProvider,
  useHook
} from "hooks/useHook";
import { render } from "tests/test-utils";
import SelectedProductCard from ".";
import { screen, waitFor } from "@testing-library/react";

export const wrapper = ({ children }) => (
  <HookProvider>
    {children}
  </HookProvider>
);

it("Renders correctly SelectedProductCard", async () => {
  const { result } = renderHook(() => useHook(), {
    wrapper
  });

  act(() => {
    result.current.setSelectedProducts([{_id: ""a14da5", title: "product test", description: "description of product test"}]);
  });

   render(
        <SelectedProductCard
          key={a14da5}
          selectedProduct={{_id: ""a14da5", title: "product test", description: "description of product test"}}
        />
  );

  expect(
    screen.getAllByTestId("div-selected-product-card-container")
  ).toMatchSnapshot();
});

但是组件的测试不起作用。 如何测试此组件模拟数据？