我该如何为以下内容编写一个通过测试？其中getLifestages是一个有效的get API调用，它返回一个数组，如：
[{_id: 1, title: 'School'},{_id: 2, title: 'Work'}]

import { useQuery } from 'react-query';

const useLifestages = () => useQuery(
    ['GET_LIFESTAGES'],
    getLifestages,
    {
        staleTime: params.staleTime,
        keepPreviousData: true
    }
);

const LandingScreen = () => {
  const { data: lifestages, isLoading } = useLifestages();

  if (isLoading) return <Loading />

  return (
    <ErrorBoundary>
      <div className="container">
        <header className="header">
          Heading
        </header>
        <input 
          className="search-bar" 
          type='search' 
          role='search' 
        />
        
        {lifestages.map(lifestage => (
          <div
            key={lifestage._id}
            lifestage={lifestage} 
            role='button'
          />
        ))}

      </div>
    </ErrorBoundary>
  );
};

我想模拟API响应，到目前为止我所做的还没有工作。

jest.mock('react-query', () => ({
  useQuery: jest.fn().mockReturnValue(({ 
     data: [{
         _id: 1, title: 'School'
       },{
         _id: 2, title: 'Work'
     }], 
     isLoading: false
}));

describe("Load landing screen", () => {
  
    it("Renders the buttons", () => {
       render(
         <LandingScreen />
       );
       const button = screen.getByRole('button');
       expect(button).toBeInTheDocument();
    })

});

我看到的错误是这样的：

TypeError: Cannot destructure property 'data' of '(0 , _queries.useLifestages)(...)' as it is undefined.

       8 |
       9 |
    > 10 |   const { data: lifestages, isLoading } = useLifestages();

在我看来，这可能是因为数据还没有从调用中返回，并且给出了undefined。但是很明显，我的mock不起作用，因为它根本不应该调用API，而是使用我的mocked数据。我有点困惑，因为我是测试异步代码的新手，所以任何帮助都将非常感谢！