Mock Gatsby's useStaticQuery with Jest

When developing this blog I used a React hook for the very first time: useStaticQuery() from Gatsby. This hook executes a GraphQL query and returns the data to the component. In my case I use it to query the site metadata in a component and I want to mock the useStaticQuery() hook to verify that my components behaves correctly based on the result of the query.

At first I was a bit confused since I have never mocked a React hook before but then I remembered that this is JavaScript where everything is a function and you can easily create a mock of a function using jest.spyOn() and then mock the implementation using .mockImplementation().

const useStaticQuery = jest.spyOn(Gatsby, 'useStaticQuery');
useStaticQuery.mockImplementation(() => ({
  site: {
    siteMetadata: {
      author: 'Florian',
      description: 'My description',
      title: 'My Title',
    },
  },
}));

As far as I know it is not possible in Jest to spy on a single export from a module, you always have to import the module. However, Gatsby does not have a default export that contains useStaticQuery, but you can use the * to put all exports from Gatsby into a module.

import * as Gatsby from 'gatsby';