According to [Gatsby docs](https://www.gatsbyjs.org/docs/testing-components-with-graphql/#testing-staticquery), components that use static queries need to be split into variants: one being a pure component and the other that actually uses the static query, passing results to the pure component.

Given an example component:

```
import React from "react";
import { Helmet } from "react-helmet";
import { useStaticQuery, graphql } from "gatsby";

export const PureSEO = ({
  description = ``,
  lang = `en`,
  meta = [],
  title = ``,
  image = ``,
  ...metaData
}): JSX.Element => {
  const metaDescription = description;

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: metaData.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
        {
          name: `og:image`,
          content: image,
        },
        {
          name: `twitter:image`,
          content: image,
        },
        {
          name: `image`,
          content: image,
        },
      ].concat(meta)}
    />
  );
};

const SEO: React.FC<Props> = ({
  description = ``,
  lang = `en`,
  meta = [],
  title = ``,
}): JSX.Element => {
  const { site, image } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            rootDir
          }
        }
        image: file(relativePath: { eq: "favicon.png" }) {
          childImageSharp {
            fixed(width: 400) {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    `
  );

  return (
    <PureSEO
      {...site.siteMetadata}
      description={description}
      image={image}
      lang={lang}
      meta={meta}
      title={title}
    />
  );
};

interface Props {
  description?: string;
  lang?: string;
  meta?: HTMLMetaElement[];
  title: string;
}

export default SEO;

```

I don't get full test coverage because `SEO` is not tested; but I don't think I *should* be testing that component, since the only logical difference is that it is using static queries.

**How can I achieve better or 100% test coverage for my components, given this pattern?**