如何使用快照子组件进行测试

Question

我正在尝试测试我的反应组件（使用快照测试）。问题是如何渲染子组件？我正在使用Apollo和next.js，页面可以正确渲染，但项目不能。 我的测试是这样的：

describe('tab', () => {
  const store = createStore(errorUI);
    it('renders correctly', async () => {
      let wrapper;
      const mocks = [{
        request: {
          query: Query,
        },
        result: { data: { Mocked } }
      }];
      await act(async () => {
        wrapper = TestRenderer.create(
          <MockedProvider {...mocks} addTypename={false}>
            <Provider store={store}>
              <I18nextProvider i18n={i18n}>
                <VippedPage { ...Mocked }/>
              </I18nextProvider>
            </Provider>
          </MockedProvider>
        )
    });
    const tree = wrapper.toJSON();
    expect(tree).toMatchSnapshot();  
  });
});  

我的组件是这样的：

const Componeny =  () => {
  const { loading, data, error, fetchMore } = useQuery(query);
  const items = data?.items || [];
  const itemsList = items && items.map(item => (
    <Item
      key={item.id}
      carousel={true}
      itemId={itemId}
      setCarousel={setCarousel}
      {...item}
    />
  ));
  return (
    <EndlessItemsHoc>
      {itemsList}
    </EndlessVipItems>
  )
}

快照就是这样：

<section className="section section-block section-white">
  <div className="section-list"/>
</section>

我们的页面甚至没有那么复杂，但是主要的问题在于带有孩子的组件。

感谢您的帮助。