Jest와 함께 PageProps를 사용하여 Gatsby 구성 요소를 테스트하려면 어떻게 해야 합니까?

저는 현재 Typescript를 사용하여 Gatsby 애플리케이션을 개발 중입니다. Gatsby의 내부 소품을 사용해야 하는 작업이 하나 있습니다. 이러한 내부 소품은 Gatsby의 PageProps 인터페이스에서 가져옵니다.

이것은 내 코드입니다.

// src/pages/post.tsx
import React from "react";
import { graphql, PageProps} from "gatsby";

import { useLocalSearch } from "@hooks";
import { BlogQuery } from "@generated/graphql";

export const query = graphql`
  query BlogQuery {
    latest: allMdx {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            tags
            description
            categories
            thumbnail {
              childImageSharp {
                fluid(maxWidth: 1040, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            date
          }
          timeToRead
          excerpt
        }
      }
    }
  }
`;

const Post: React.FC<PageProps<BlogQuery>> = props => {
  const {
    location,
    navigate,
    data: { latest },
  } = props;
  console.log(props);

  const [localQuery, setQuery, result] = useLocalSearch(location.search);

  const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>): void => {
    navigate(e.target.value ? `/post/?search=${e.target.value}` : ``);
    setQuery(e.target.value);
  };

  return (
    <OtherComponents />
    <StyledSearchContainer>
      <StyledSearchWrapper>
        <StyledSearch
          id="search"
          type="search"
          value={localQuery}
          onChange={onChangeValue}
          placeholder="Search posts"
        />
      </StyledSearchWrapper>
    </StyledSearchContainer>
  );
}

BlogQuery는 graphql-codegen에 의해 자동으로 생성됩니다.

내 다른 페이지 테스트는 Gatsby's testing page queries을 따르며 완벽하게 작동합니다. 그러나 이 페이지는 둘 이상의 prop을 사용하는 동안 그들은 각각 하나의 prop만 사용합니다. 이 구성 요소를 테스트할 수 있습니까? (모든 소품을 기록하고 복사하려고했지만 전혀 도움이되지 않았습니다).

고맙습니다.