Jest Transformer for GraphQL (#1887)

* Jest Transformer for GraphQL

* Changeset

* Align versions

* Fix package.json

* yarn.lock

* Fix

Co-authored-by: Arda TANRIKULU <ardatanrikulu@gmail.com>

.changeset/big-crews-suffer.md

@@ -0,0 +1,5 @@
+---
+'@graphql-tools/webpack-loader': minor
+---
+
+feat(webpack-loader): export Options

.changeset/yellow-pumas-impress.md

@@ -0,0 +1,5 @@
+---
+'@graphql-tools/jest-transform': major
+---
+
+new jest transform

packages/jest-transform/README.md

@@ -0,0 +1,45 @@
+# GraphQL Jest Transform
+
+A Jest transformer to preprocess GraphQL Documents (operations, fragments and SDL)
+
+    yarn add @graphql-tools/jest-transform
+
+In your `package.json`:
+
+```json
+{
+  "jest": {
+    "transform": {
+      "\\.(gql|graphql)$": "@graphql-tools/jest-transform"
+    }
+  }
+}
+```
+
+or `jest.config.js`:
+
+```javascript
+module.exports = {
+  // ...
+  transform: {
+    '\\.(gql|graphql)$': '@graphql-tools/jest-transform',
+  },
+};
+```
+
+> How is it different from `jest-transform-graphql`? It doesn't use `graphql-tag/loader` under the hood but our own, more optimized and customisable `@graphql-tools/webpack-loader`.
+
+## Options
+
+- noDescription (_default: false_) - removes descriptions
+- esModule (_default: false_) - uses import and export statements instead of CommonJS
+
+```json
+{
+  "globals": {
+    "graphql": {
+      "noDescription": true
+    }
+  }
+}
+```

packages/jest-transform/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@graphql-tools/jest-transform",
+  "version": "0.0.0",
+  "description": "Jest Plugin to load and parse imported GraphQL files",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:ardatan/graphql-tools.git",
+    "directory": "packages/jest-transform"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./*": {
+      "require": "./dist/*.js",
+      "import": "./dist/*.mjs"
+    }
+  },
+  "typings": "dist/index.d.ts",
+  "typescript": {
+    "definition": "dist/index.d.ts"
+  },
+  "peerDependencies": {
+    "graphql": "^14.0.0 || ^15.0.0"
+  },
+  "buildOptions": {
+    "input": "./src/index.ts"
+  },
+  "dependencies": {
+    "@graphql-tools/webpack-loader": "^6.4.0",
+    "@jest/transform": "^27.0.2",
+    "@jest/types": "^27.0.2",
+    "tslib": "~2.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  }
+}

packages/jest-transform/src/index.ts

@@ -0,0 +1,37 @@
+import loader from '@graphql-tools/webpack-loader';
+import { SyncTransformer, TransformOptions } from '@jest/transform';
+import { Config } from '@jest/types';
+
+export type GraphQLGlobalOptions = ThisParameterType<typeof loader>['query'];
+
+declare module '@jest/types' {
+  namespace Config {
+    interface ConfigGlobals {
+      graphql: GraphQLGlobalOptions;
+    }
+  }
+}
+
+class GraphQLTransformer implements SyncTransformer {
+  process(input: string, _filePath: Config.Path, jestConfig: TransformOptions): string {
+    const config = jestConfig.config.globals?.['graphql'] || {};
+    // call directly the webpack loader with a mocked context
+    // as the loader leverages `this.cacheable()`
+    return loader.call(
+      {
+        cacheable() {},
+        query: config,
+      },
+      input
+    );
+  }
+}
+
+let transformer!: GraphQLTransformer;
+function defaultTransformer(): GraphQLTransformer {
+  return transformer || (transformer = new GraphQLTransformer());
+}
+
+export function process(...args: any[]): any {
+  return (defaultTransformer().process as any)(...args);
+}

packages/links/package.json

@@ -10,8 +10,8 @@
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/index.js",
-   "module": "dist/index.mjs",
- "exports": {
+  "module": "dist/index.mjs",
+  "exports": {
     ".": {
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"

packages/webpack-loader/src/index.ts

@@ -41,7 +41,7 @@ function expandImports(source: string, options: Options) {
   return outputCode;
 }
 
-export default function graphqlLoader(source: string) {
+export default function graphqlLoader(this: { query: Options; cacheable: VoidFunction }, source: string) {
   this.cacheable();
   const options: Options = this.query || {};
   let doc = parseDocument(source);

tsconfig.json

@@ -25,7 +25,7 @@
     "skipLibCheck": true,
 
     "paths": {
-      "@graphql-tools/*-loader": ["packages/loaders/*/src/index.ts"],
+      "@graphql-tools/*-loader": ["packages/loaders/*/src/index.ts", "packages/*-loader/src/index.ts"],
       "@graphql-tools/*": ["packages/*/src/index.ts"]
     }
   },