Gatsby: Graphql with Jest throwing "graphql" is not defined error.

[Neha-takhi-cipl]

Hi, My query is running fine and i am also getting data in props. But when i create jest test case for it. Then it throws "graphql is not defined error".
My Component is:

class Home extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  public render() {
    const { data, intl } = this.props;


    return (
      <div>
      <CalculatorBlock
        calcBannerImg1={data.calcBannerImg2.sizes.src}
        />
        </div >
    );
  }

const mapStateToProps = (state: RootState): StateProps => {
  return {};
};
export default injectIntl(Home) as React.ComponentClass<OwnProps>;

export const ImageFragment = graphql
  `fragment imageData2 on RootQueryType {
    calcBannerImg2: imageSharp(id: { regex: "home/banner-image-2.png/" }) {
      sizes(maxWidth: 600) {
        ...GatsbyImageSharpSizes
      }
    }
}`;

My Test File is

import * as React from "react";
import Home from "./Home";

describe("Home container", () => {
  it("should render correctly", () => {
    const wrapper = shallowWithIntl(<Home />);
    expect(wrapper).toMatchSnapshot();
  });
});

my test cases is being failed . Throwing below error
● Test suite failed to run

ReferenceError: graphql is not defined

[swashata]

Hi,

Maybe you can create a mock? As far as I have learnt, graphql is extracted during build time.

So in your test file setup, do something like

global.graphql = jest.fn()

[Neha-takhi-cipl]

after writing this on tests/helper/intl.ts . Its throwing this error
Property 'graphql' does not exist on type 'Global'.
Please correct me if i am doing wrong.

[swashata]

I have no experience with typescript, so someone else have to chime in. Also give it a read https://blog.cloudboost.io/how-to-mock-es6-modules-and-globals-with-jest-814de9b24c6d

[eric-personal]

Anyone get an answer to this. I'm having the same issue and error. I tried using

global.graphql = jest.fn()

in my test but it still gives me the ReferenceError: graphql is not defined warning ?

[DSchau]

@eric-personal you're using Gatsby v1 right? I'm about to put together an example of how to do this, but I'm presuming the switch from a global graphql call in Gatsby v1 to something like the below (👇) in Gatsby v2 would resolve the issue:

import { graphql } from 'gatsby';

// component here

export const pageQuery = graphql``;

[eric-personal]

Yes I'm using Gatsby 1.
But I did find a way around it by doing something similar.
graphql is an export module so I just imported that directly into my component that has my fragment.

import { graphql } from 'graphql';

Not sure if that has any side effects or not but so far it works.
Whats your example for your work around for V1 or is it more complicated than writing it in here ?
Thanks for the fast reply.

[DSchau]

I can create it, but it _should_ be as simple as a jest.setup.js file with some globals defined! Would that be helpful?

I've found some weirdness occasionally with defining globals _in_ a Jest test file behaving differently than if they're defined in the setup file.

[eric-personal]

Yes that would be super helpful. I can test it after you add an example. Thanks again.

[DSchau]

@eric-personal here ya go. https://github.com/DSchau/gatsby-5622

In particular, check out the following files:

• jest.config.js
  
  
  
  • Configures Jest to use custom babel and "setup" files
  
  
• jest.setup.js
  
  
  
  • Shows _how_ to mock out graphql global
  
  
• Sample test

Closing for others, as well :) Please re-open if I, or any of us, can help with anything further.

Thanks!

[eric-personal]

Unfortunately the above didn't work for me when I finally got around to testing it today.
I'm using "babel-jest": "^23.0.1",

I think it might be to do with an unresolved module.
Could not find a declaration file for module 'babel-jest'. '/project/node_modules/babel-jest/build/index.js' implicitly has an 'any' type. Trynpm install @types/babel-jestif it exists or add a new declaration (.d.ts) file containingdeclare module 'babel-jest';``

Not sure why my gatsby project is not able to require it.

[DSchau]

Uhm... that's extremely weird, that looks like a Typescript error.

Did you use yarn? If not, you may not get deterministic resolution for packages.

(Note: I didn't explicitly mention to use or not use yarn, but I'd try that first!)

[eric-personal]

Yes I tried yarn add @types/babel-jest --dev based on the warning above, but that threw another error.

error An unexpected error occurred: "https://registry.yarnpkg.com/@types%2fbabel-jest: Not found".
info If you think this is a bug, please open a bug report with the information provided in

[DSchau]

So, I'd imagine it's something with your repository? If you check out the repo I linked, everything works right?