How to ignore generated Relay query files in Jest tests using create-react-app?

Question

I created a React app using create-react-app and added Relay. I want to test my components with Jest, but the Relay compiler generates files that Jest reads as test files. I can't ignore the files because I'm using create-react-app.

For example a test might look like:

// src/components/MyComponent/__tests__/MyComponent.test.js
import React from 'react';
import graphql from 'babel-plugin-relay/macro';
import { QueryRenderer } from 'react-relay';
import renderer from 'react-test-renderer';
import { MockPayloadGenerator, createMockEnvironment } from 'relay-test-utils';
import MyComponent from '../MyComponent';

const query = graphql`
  query MyComponentQuery @relay_test_operation {
    myComponent: node(id: "test-id") {
      ...MyComponent_myComponent
    }
  }
`;

const rootRender = ({ props }) => <MyComponent myComponent={props.myComponent} />;

it('renders without crashing', () => {
  const environment = createMockEnvironment();

  const component = renderer.create(
    <QueryRenderer
      environment={environment}
      query={query}
      variables={{}}
      render={rootRender}
    />
  );
  environment.mock.resolveMostRecentOperation((operation) =>
    MockPayloadGenerator.generate(operation));

  expect(component.toJSON()).toMatchSnapshot();
});

relay-compiler will generate a file src/components/MyComponent/__tests__/__generated__/MyComponentQuery.graphql.js for the query.

When running the tests, I get:

FAIL src/components/MyComponent/__tests__/__generated__/MyComponentQuery.graphql.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

How do I get Jest to ignore the generated query files? Is there a way to do this without ejecting from create-react-app?

Answer 1

Try to add this to your package.json

    ...,
    "jest": {
        "testPathIgnorePatterns": [
            ".graphql.js"
        ]
    },
    ...