Ts-jest: Can't import *.graphql files in tests

[lukejagodzinski]

I know that similar issue was already posted but neither of them could be applied to my problem.

So I have a TypeScript project in which I can import *.graphql files. I'm using Parcel. In the project I have the graphql.d.ts file:

declare module "*.graphql" {
  import { DocumentNode } from "graphql";
  const value: DocumentNode;
  export default value;
}

so as you can see I can import files using default import syntax:

import USER_QUERY from "./graphql/userQuery.graphql";

and everything works great. The problem, starts when in the test file I try to import React component that imports graphql file. In such, situation USER_QUERY is undefined. When in test environment I have to use the following syntax:

import * as USER_QUERY from "./graphql/userQuery.graphql";

So, the question is how to support default import syntax in test?
I'm using jest-transform-graphql transformer in Jest configuration:

module.exports = {
  verbose: true,
  transform: {
    "^.+\\.graphql$": "jest-transform-graphql",
    "^.+\\.tsx?$": "ts-jest",
  },
  testMatch: ["**/tests/components/*.tsx"],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  roots: ["<rootDir>/tests", "<rootDir>/src"],
  testEnvironment: "jsdom",
  setupTestFrameworkScriptFile: "./tests/setup.ts",
};

Any ideas?

[huafu]

moduleFileExtensions does not have the graphql entry, so those files are simply ignored by jest.
If that is not fixing your issue, please re-open ;-)

[lukejagodzinski]

@huafu no it's still undefined. It's not that those files are ignored. It's just about not being able to import them using:

import USER_QUERY from "./graphql/userQuery.graphql";

instead I have to write:

import * as USER_QUERY from "./graphql/userQuery.graphql";

In my ts config file I have "allowSyntheticDefaultImports": true but also tried with it being set to false. The same effect - always undefined.

[lukejagodzinski]

@huafu please reopen this issue. I've made more tests and I've created my own transformer. It appears that ts-jest does not honor the TS "allowSyntheticDefaultImports": true setting. I've noticed that jest-transform-graphql is returning object in the form:

module.exports = doc; // This is actual parsed query in form of the DocumentNode
module.exports["queryName"] = oneQuery(doc, "queryName"); // Individual exports for each query in the graphql file

In this case there is no modules.exports.default which ES expects. So to make it work in TS, it we should set the allowSyntheticDefaultImports to true. And even by doing this it doesn't see this setting.

I could create my own transformer that would add modules.exports.default but that seems to be a little bit overkill. And I don't see any option to generate that automatically using graphql-tag/loader which is being used in the jest-transform-graphql

[lukejagodzinski]

Here is a transformer code that I wrote that works in the similar way as the Parcel's graphql asset loader:

const gql = require("graphql-tag");

module.exports = {
  process(src) {
    var str = JSON.stringify(gql(src));
    return "module.exports=" + str + ";module.exports.default=module.exports;";
  }
};

But still waiting for the official support of the allowSyntheticDefaultImports setting in ts-jest

[macdonaldr93]

@lukejagodzinski thank you sooo much.

[lukejagodzinski]

@macdonaldr93 I've created my own package for that @jagi/jest-transform-graphql if you don't want to do it by providing file with the transformer code.