Create React Appで作成したプロジェクトをJestでテストしようとするとGraphQLのファイルが読み込めない

モックサーバーとして建てたGraphQLサーバーを利用して useQuery を使ったカスタムフックのテストしようと思い、
GraphQLの変換処理を設定してテストを起動したところ、エラーになってしまった。

package.json

{
  ...,
  "jest": {
    "transform": {
      "\\.(graphql|gql)$": "jest-transform-graphql"
    }
  }
}

$ npm run test

... (中略)

Invariant Violation: Argument of foobar.graphql passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document

ファイルのインポートはできているようだが、インポートされた内容が DocumentNode ではなくファイル名の文字列（ foobar.graphql ）になってしまっている。

react-app-rewired を使ってJestにどのような設定が渡されているか確認したところ、下記の通りだった。

config-overrides.js

module.exports = {
    jest: function override(config) {
        console.log(config);
        process.abort();
        return config;
    }
};

$ npm run test
{
  ...,
  transform: {
    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '/path/to/project/node_modules/react-app-rewired/scripts/utils/babelTransform.js',
    '^.+\\.css$': '/path/to/project/node_modules/react-scripts/config/jest/cssTransform.js',
    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': '/path/to/project/node_modules/react-scripts/config/jest/fileTransform.js',
    '\\.(graphql|gql)$': 'jest-transform-graphql'
  },
  ...
}

これを見ると、 .graphql ファイルが transform の3行目にある fileTransform.js のファイルパターンに合致してしまっているため、
jest-transform-graphql に到達できていないことがわかった。

この transform は react-scripts 内に定義されている。

https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/scripts/utils/createJestConfig.js#L47-L49

対策の方法が分からなかったので、 react-app-rewired で fileTransform.js の例外パターンを追加することにした。

const FILE_TRANSFER_KEY = "js|jsx|mjs|cjs|ts|tsx|css|json";
module.exports = {
    jest: function override(config) {
        Object.keys(config.transform).forEach(key => {
            const replacedKey = key.replace(FILE_TRANSFER_KEY, `${FILE_TRANSFER_KEY}|graphql|gql`);
            if (key !== replacedKey) {
                config.transform[replacedKey] = config.transform[key];
                delete config.transform[key];
            }
        });
        return config;
    }
};

これで .graphql ファイルが正常にロードされるようになった。