CODEWITHSUNDEEP
reactjstypescriptgraphqlrelayjsrelaymodern
Ejaz Karim
Ejaz Karim

Reputation: 3696

Graphql: Typescript + Jest + Relay + Jest Can't seem to integrate together

I'm testing my React application built with Typescript and Relay. When I try to test relay powered component I am getting following errors:

 Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `graphql`.

I've following .babelrc file:


{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["relay",
    [
      "transform-relay-hot",
      {
        "schema": "./schema.graphql",
        "watchInterval": 2000,
        "verbose": true
      }
    ]
  ]
}

and following Jest configurations:

module.exports = {
  roots: ["<rootDir>/src"],
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  testRegex               : "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  moduleFileExtensions    : ["ts", "tsx", "js", "jsx", "json", "node"],
  transformIgnorePatterns : ["node_modules/(?!(date-fns))"],
  moduleNameMapper: {
      "^Apps(.*)$"      : "<rootDir>/src/apps$1",
      "^Pages(.*)$"     : "<rootDir>/src/pages$1",
      "^Components(.*)$": "<rootDir>/src/components$1",
      "^Logic(.*)$"     : "<rootDir>/src/logic$1",
      "^Theme(.*)$"     : "<rootDir>/src/theme$1",
      "^Config(.*)$"    : "<rootDir>/src/config$1",
      "^Public(.*)$"    : "<rootDir>/src/public$1",
  },
  globals: {
    'ts-jest': {
      tsConfig: "tsconfig.json",
      // diagnostics: false
    }
  },

  setupTestFrameworkScriptFile: "./src/test/test.setup.ts"
};

Am I missing something here?

Upvotes: 3

Views: 454

Answers (1)

MikeSha
MikeSha

Reputation: 21

Not sure if the question is still relevant, but here what I had.

I have the same issue using ts-jest. I spent days on this. Basically switching to babel-jest solved the issue. jest.config.js

module.exports = {
  ...
  transform: {
    "\\.[jt]sx?$": "babel-jest",
    ...
  },
  ...
  globals: { // if necessary
    'jest': { // don't forget to change `ts-jest` to `jest` here
      babelConfig: true
    }
  }
}

Upvotes: 2

Related Questions