单元测试 gatsby useStaticQuery 自定义钩子

Question

我正在尝试测试一个仅在 gatsby 中返回 graphql 数据的自定义钩子。 这是我到目前为止所拥有的，但它给了我一个错误。

挂钩 useMyData

    import { useStaticQuery, graphql } from 'gatsby';

    export default () => {
      const {
        content: { data },
      } = useStaticQuery(graphql`
        query myQuery {
          content {
            data {
              views: 10
            }
          }
        }
      `);
      return data;
    };

玩笑测试 从'./useMyData'导入useMyData;

jest.mock('./useMyData', () => ({
  __esModule: true,
  default: () => ({
    useStaticQuery: () => ({
      content: {
        data: {
          test: 'test',
        },
      },
    }),
  }),
}));

test('data is returned', () => {
  const data = useMyData();
  // console.log('data = ', data);
});

上面没有运行useStaticQuery。任何人都知道我将如何测试它。

Answer 1

您需要直接在gatsby 模块上模拟useStaticQuery 方法，而不是在./useMyData 上。大致如下：

jest.mock('gatsby', () => ({
  __esModule: true,
  useStaticQuery: () => ({
    content: {
      data: {
        test: 'test',
      },
    },
  }),
}));