Jest 28 failure: should return an object or a Promise resolving to an object

[granttchart]

The following error is being thrown on Jest 28.1.0 due to Jest breaking changes. https://jestjs.io/docs/upgrading-to-jest28#transformer explains the necessary fix.

      `process()` or/and `processAsync()` method of code transformer found at 
      "node_modules/jest-transform-graphql/index.js" 
      should return an object or a Promise resolving to an object. The object 
      must have `code` property with a string of processed code.
      This error may be caused by a breaking change in Jest 28:
      https://jestjs.io/docs/upgrading-to-jest28#transformer
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation

[ezmiller]

+1 also running into this error

[dep]

+1 also running into this error.

[dep]

@granttchart Have you found a workaround for this?

[dep]

Folks ending up here might have some luck switching to this:

https://www.npmjs.com/package/@graphql-tools/jest-transform

[dobesv]

@graphql-tools/jest-transform isn't quite compatible, and doesn't allow multiple operations per file.

[SimonSomlai]

Worked for me!;

npm i -D @graphql-tools/jest-transform

**jest.config.js**
{
  "jest": {
    "transform": {
      "\\.(gql|graphql)$": "@graphql-tools/jest-transform"
    }
  }
}

[andre-muller]

I was trying to use @graphql-tools/jest-transform but it's throwing an error when file has multiple operations.

  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'source')

      36 |  * Used to generate useUseUserProjectsProjectListQuery
      37 |  */
    > 38 | export const USER_PROJECTS_CONNECTION_QUERY = gql`
         |                                                  ^
      39 |   query useUserProjects_ProjectList(
      40 |     $projectFilters: ProjectFilters
      41 |     $listInputs: ListInput

      at ../node_modules/graphql-tag/src/index.ts:127:25
          at Array.forEach (<anonymous>)
      at gql (../node_modules/graphql-tag/src/index.ts:125:8)
      at Object.<anonymous> (src/views/hooks/useUserProjects.tsx:38:50)
      at Object.<anonymous> (src/views/components/UpdateAssigneesDialog/ProjectList.tsx:19:63)
      at Object.<anonymous> (src/views/components/UpdateAssigneesDialog/ProjectReassign.tsx:27:59)
      at Object.<anonymous> (src/views/components/UpdateAssigneesDialog/UpdateAssigneesDialog.tsx:18:63)
      at Object.<anonymous> (src/views/components/UpdateAssigneesDialog/index.ts:9:69)
      at Object.<anonymous> (src/views/components/EditUserDrawer/components/EditUserForm/EditUserForm.tsx:41:69)
      at Object.<anonymous> (src/views/components/EditUserDrawer/components/EditUserForm/EditUserForm.test.tsx:13:60)
      ```

[monigala]

The following error is being thrown on Jest 28.1.0 due to Jest breaking changes. https://jestjs.io/docs/upgrading-to-jest28#transformer explains the necessary fix.

      `process()` or/and `processAsync()` method of code transformer found at 
      "node_modules/jest-transform-graphql/index.js" 
      should return an object or a Promise resolving to an object. The object 
      must have `code` property with a string of processed code.
      This error may be caused by a breaking change in Jest 28:
      https://jestjs.io/docs/upgrading-to-jest28#transformer
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation

The above link to the resolution/explanation results in 404.

[MasterOdin]

The first link should be https://jestjs.io/docs/28.x/upgrading-to-jest28#transformer.

[SethDavenport]

Should be able to do something like this then:

jest.config.js:

{
  "jest": {
    "transform": {
      "\\.(gql|graphql)$": "./transform-graphql-jest-28-shim.js"
    }
  }
}

transform-graphql-jest-28-shim.js:

const { process: upstreamProcess } = require('jest-transform-graphql');

const process = (...args) => {
  const code = upstreamProcess(...args);
  return { code };
};

module.exports = { process };

[dep]

Thank you @SethDavenport this is a great solution.

[yogeshgadge]

Neither of these workarounds worked jest 29.6.4 in a Typescript project

It works fine in rollup build but I am unit testing my source.

[anewstead]

@yogeshgadge

Neither of these workarounds worked jest 29.6.4 in a Typescript project

It works fine in rollup build but I am unit testing my source.

thought i had this too, try running
jest --clearCache
and retry with @SethDavenport shim
worked for me

[jorgequintt]

Should be able to do something like this then:

jest.config.js:

{
  "jest": {
    "transform": {
      "\\.(gql|graphql)$": "./transform-graphql-jest-28-shim.js"
    }
  }
}

transform-graphql-jest-28-shim.js:

const { process: upstreamProcess } = require('jest-transform-graphql');

const process = (...args) => {
  const code = upstreamProcess(...args);
  return { code };
};

module.exports = { process };

This was a life saver. Thank you very much