Ts-jest: Possible incompatibility with babel-plugin-inline-import-graphql-ast

[Slessi]

Issue

I am running into an issue when using in conjunction with the babel plugin:

• detrohutt/babel-plugin-inline-import-graphql-ast

I initially submitted an issue on the plugin repo (detrohutt/babel-plugin-inline-import-graphql-ast#28) but after I created the reproduction repo I noticed that my tests only fail on the TS files, and pass on JS files, so I think it may be related to the ts-jest/preprocessor.js but not sure.

Expected behavior

Tests pass irrespective whether they've been transpiled or not.

Output from your debug log

You can activate the debug logger by setting the environment variable TS_JEST_DEBUG="true" before running yarn test. The output of the logger
will be in /node_modules/ts-jest/debug.txt

I did not find any such log after setting this env variable, but here is the command output

$ jest
 PASS  build/App.test.js
 FAIL  src/App.test.tsx
  ● Test suite failed to run

    /Users/edward/Projects/jest-ast-inline-test/login_query.graphql:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){mutation loginUser($emailAddress: String!, $password: String!, $deviceToken: String!) {
                                                                                                      ^^^^^^^^^

    SyntaxError: Unexpected identifier

       5 | import { ApolloProvider, Mutation } from "react-apollo";
       6 | 
    >  7 | import loginGql from "../login_query.graphql";
       8 | 
       9 | export class App extends React.Component {
      10 |     public render() {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/App.tsx:7:31)
      at Object.<anonymous> (src/App.test.tsx:7:15)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.933s

Link to a minimal repo that reproduces this issue

Slessi/jest-ast-inline-test

[kulshekhar]

how is the graphql file being transformed? ts-jest doesn't understand/process these files. Is there another transformer doing this?

[Slessi]

I am using the babel plugin mentioned in post, detrohutt/babel-plugin-inline-import-graphql-ast

[kulshekhar]

Is it possible to import graphql files from typescript without using babel? If not, I don't think ts-jest will be able to handle it.

[Slessi]

If jest can handle it shouldn't ts-jest be able to handle it?

In my reproduction repo, both the *.js and *.ts versions of this file have identical imports. The only difference is the *.ts goes through node_modules/ts-jest/preprocessor.js first.

[kulshekhar]

Jest uses the complete babel pipeline which probably has plugins and config to handle cases like this. Unfortunately, there's no typescript equivalent for that

[Slessi]

Mmmm, when running my project I use ds300/react-native-typescript-transformer which works with babel plugins, though I do not pretend to understand how it is actually working so possibly irrelevant

[GeeWee]

If ds300's typescript-transformer is able to do the work, there's no technical reason we shouldn't be able to. They essentially work in the same way - I'm not sure when anyone will have time to take a look at this though.

[danilobuerger]

@Slessi @kulshekhar The solution is rather simple. All you need is an additional jest transformer that takes the gql or graphql file and passes it through graphql-tag:

const gql = require("graphql-tag");
module.exports = {
  process: (src) => {
    return `exports.default = ${JSON.stringify(gql(src))};`;
  },
};

then in your package.json:

{
  "jest": {
    "transform": {
      // your other transformer
      "^.+\\.(graphql|gql)$": "<rootDir>/gqlFileTransformer.js"
    }
  }
}

Done.

Also pinging @detrohutt : This might be interesting to you to maybe include in your repo.

[huafu]

Thanks @danilobuerger.

Closing this since it's not an issue for ts-jest anyway.