v14.6.2 - jest 28 - React fails with 3rd party js

Current Behavior

When running a test on a component that imports @headlessui/react, the transformer fails. While debugging, I saw that babel-jest transformer return an object with createTransform instead of a transformer.

Additionally - in our tests, we are using @swc/jest so I expected it to grab its transformer, not babel’s. Changing those lines to use @swc/jest makes it work.

Expected Behavior

Tests should not break.

Steps to Reproduce

• Create a repo with React app
• Install @headlessui/react
• Import and use it in your component
• Run jest

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

 Test suite failed to run

    TypeError: transformer.process is not a function

      at Object.process (../../packages/react/plugins/jest.ts:37:43)
      at ScriptTransformer.transformSource (../../node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
      at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:822:19)

Environment

 Node : 16.16.0
   OS   : darwin arm64
   yarn : 3.2.3
   
   nx : 14.6.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.6.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.6.2
   @nrwl/eslint-plugin-nx : 14.6.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.6.2
   @nrwl/js : 14.6.2
   @nrwl/linter : 14.6.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.6.2
   @nrwl/nx-cloud : 14.6.0
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.6.2
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.6.2
   @nrwl/web : 14.6.2
   @nrwl/workspace : 14.6.2
   typescript : 4.7.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         rxjs: 6.6.7
         nx-stylelint: 13.5.3

[danr-za]

I can confirm the code in the PR seems to solve the issue

[luchsamapparat]

I have the same issue in my React app but in my case it seems to be caused by @stencil/core:

      at Object.process (../../packages/react/plugins/jest.ts:37:43)
      at ScriptTransformer.transformSource (../../node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
      at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:822:19)
      at Object.<anonymous> (../../node_modules/@stencil/core/internal/client/index.js:16:1)

It seems that require('babel-jest').default does not expose transform, only createTransformer (which when called would return an object with a transform method).

Here’s the commit that caused that incompatibility:

https://github.com/facebook/jest/commit/b096941c4a81e50ab2494f2909f4dcb300bdbab7#diff-5f463bc5dbe428998302335614e9bbed3b4eb3310a6075767e1b432c161d9e71L272

The corresponding PR: https://github.com/facebook/jest/pull/12407

So it seems to be caused by the update to Jest 28