Question

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

挂钩useMyData

<!DOCTYPE html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div id="submit_1" class="classname" data-count="1">Submit1</div>
  <div id="submit_2" class="classname" data-count="2">Submit2</div>
  <div id="submit_3" class="classname" data-count="3">Submit3</div>


</body>

</html>

开玩笑 从'./useMyData'导入useMyData;

    import { useStaticQuery, graphql } from 'gatsby';

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

以上内容未运行useStaticQuery。不知道我会如何测试。

Answer 1

您需要在useStaticQuery模块而不是gatsby上直接模拟./useMyData方法。类似于：

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

单元测试gatsby useStaticQuery自定义钩子

1 个答案: