jest@28 support

[kirillgroshkov]

🚀 Feature Proposal

Jest 28 has landed.

Doesn't work with current ts-jest as-is, gives this error:

 FAIL  src/test/env.test.ts
  ● Test suite failed to run

    ● Invalid return value:
      Code transformer's `process` method must return an object containing `code` key 
      with processed string. If `processAsync` method is implemented it must return 
      a Promise resolving to an object containing `code` key with processed string.
      Code Transformation Documentation:
      https://jestjs.io/docs/code-transformation
      
      at ScriptTransformer._buildTransformResult (node_modules/@jest/transform/build/ScriptTransformer.js:504:15)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:623:17)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:760:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:817:19)

Created this issue to track when jest28 support will land here.

Thanks.

Motivation

 

Example

No response

[SimenB]

The fix should be trivial fwiw, just make sure

ts-jest/src/legacy/ts-jest-transformer.ts

Line 236 in 6e44f82

private runTsJestHook(

returns an object (which has worked for years, so backwards compatible if that matters).

jestjs/jest#12638

[ahnpnl]

We had a release at next tag yesterday. Please try it out:)

[SimenB]

Ah, nice!

(Should've pinged you when making the change @ahnpnl, sorry about that)

[dante01yoon]

It ts-jest latest version doesn't support jest 28 yet?

[Snaptags]

Using the next version at least the tests succeed, but I still get lots of warnings:

ts-jest[ts-jest-transformer] (WARN) Use 'ts-jest' entry point in v28 will resolve in refactored transformer. If you wish to use legacy transformer, please adjust your Jest 'transform' config. For example:
     module.exports = {
        transform: {
           '^.+\\.tsx?$': 'ts-jest/legacy'
        }
     }

[huineng]

true, but like the message says, if you include this in your jest.config.js that warning goes away

     module.exports = {
        transform: {
           '^.+\\.tsx?$': 'ts-jest/legacy'
        }
     }

[Snaptags]

Thanks! Adding /legacy to something does not sound very future-proof, though :-D

[ahnpnl]

Thanks! Adding /legacy to something does not sound very future-proof, though :-D

We plan a refactoring to switch to esbuild/swc as default for v28. Marking the current codes as legacy to ensure that we still have a backup with and let users have more time to adopt to new one.

[Ezard]

Is there already a built-in way to use esbuild/swc with v27?

If not then would it be worth making it opt-in for v28, and then making it the default (with legacy option also available) in v29 once stability/compatibility/etc has been ensured?

[ahnpnl]

Is there already a built-in way to use esbuild/swc with v27?

If not then would it be worth making it opt-in for v28, and then making it the default (with legacy option also available) in v29 once stability/compatibility/etc has been ensured?

Nope we don't have it built in for v27 yet. Have it opt-in for v28 seems to be easier in term of refactoring.

[cwadrupldijjit]

I haven't had any luck running my tests at all, even when updating to the latest versions of jest and ts-jest@next. I'll peruse for an issue that's currently open for what I'm looking at, but so far, the only ones I can see are closed and do not have suggestions that have fixed them. The warning that was mentioned to add the transform with ts-jest/legacy isn't seeming to work to suppress all of the warnings and no matter what I've tried to do, nothing succeeds. Every test is currently failing and I'm not quite sure why.

For reference, the versions I'm using are jest@28.0.0, ts-jest@28.0.0-next.1, node@18.0.0 and I'm running on Windows 11 Pro, x64.

[ahnpnl]

I haven't had any luck running my tests at all, even when updating to the latest versions of jest and ts-jest@next. I'll peruse for an issue that's currently open for what I'm looking at, but so far, the only ones I can see are closed and do not have suggestions that have fixed them. The warning that was mentioned to add the transform with ts-jest/legacy isn't seeming to work to suppress all of the warnings and no matter what I've tried to do, nothing succeeds. Every test is currently failing and I'm not quite sure why.

For reference, the versions I'm using are jest@28.0.0, ts-jest@28.0.0-next.1, node@18.0.0 and I'm running on Windows 11 Pro, x64.

What exactly not working? Do you have a reproduce scenario?

[cwadrupldijjit]

I also would note that I was seeing the same behavior when I was on Node 16.14.0, right before installing the latest version of Node.

My console shows the following when I run it:

> npm test

> real-time-forum-with-permissions-server@1.0.0 test
> node --experimental-vm-modules node_modules/jest/bin/jest.js

(node:40632) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:31464) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:19084) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:12472) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)                                                                                                                                                                                                                          
(node:11736) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time                                                                                                                                                                                   
(Use `node --trace-warnings ...` to show where the warning was created)
(node:4668) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:38928) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  services/__tests__/crypto.service.test.ts
  ● Test suite failed to run
                                                                                                                                                                                                                                                                                                 
    TypeError: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined                                                                                                                                             
                                                                                                                                                                                                                                                                                                 
      3 | import { Buffer } from 'buffer';                                                                                                                                                                                                                                                       
      4 |                                                                                                                                                                                                                                                                                        
    > 5 | const cryptoKey = Buffer.from(process.env.BASIC_CRYPTO_SECRET!, 'hex');                                                                                                                                                                                                                
        |                          ^                                                                                                                                                                                                                                                             
      6 |                                                                                                                                                                                                                                                                                        
      7 | function encryptData(data: string|Buffer, iv = randomBytes(16)) {                                                                                                                                                                                                                      
      8 |     const dataReadStream = new PassThrough();                                                                                                                                                                                                                                          

      at services/crypto.service.ts:5:26

 FAIL  services/__tests__/date.service.test.ts
  ● Test suite failed to run

    Cannot find module './string.service.js' from 'services/date.service.ts'

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)
          at async Promise.all (index 0)

 FAIL  services/__tests__/auth.service.test.ts
  ● Test suite failed to run
                                                                                                                                                                                                                                                                                                 
    Cannot find module '../auth.service.js' from 'services/__tests__/auth.service.test.ts'                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                 
      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)                                                                                                                                                                                                    
          at async Promise.all (index 0)                                                                                                                                                                                                                                                         
                                                                                                                                                                                                                                                                                                 
 FAIL  services/__tests__/string.service.test.ts                                                                                                                                                                                                                                                 
  ● Test suite failed to run
                                                                                                                                                                                                                                                                                                 
    Cannot find module '../string.service.js' from 'services/__tests__/string.service.test.ts'                                                                                                                                                                                                   
                                                                                                                                                                                                                                                                                                 
      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)                                                                                                                                                                                                    
          at async Promise.all (index 0)                                                                                                                                                                                                                                                         
                                                                                                                                                                                                                                                                                                 
 FAIL  services/__tests__/email.service.test.ts                                                                                                                                                                                                                                                  
  ● Test suite failed to run

    Cannot find module './google-auth.service.js' from 'services/email.service.ts'

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)
          at async Promise.all (index 1)

 FAIL  services/__tests__/google-auth.service.test.ts
  ● Test suite failed to run

    SyntaxError: The requested module 'jsonwebtoken' does not provide an export named 'sign'

      at Runtime.linkAndEvaluateModule (node_modules/jest-runtime/build/index.js:827:5)

Test Suites: 6 failed, 6 total
Tests:       0 total
Snapshots:   0 total
Time:        5.512 s
Ran all test suites.

The jest configuration looks like:

module.exports = {
  moduleDirectories: [
    "node_modules"
  ],
  moduleFileExtensions: [
    "js",
    "mjs",
    "ts"
  ],
  extensionsToTreatAsEsm: [
    ".ts"
  ],
  preset: "ts-jest/presets/default-esm",
  testMatch: [
    "**/__tests__/**/*.[jt]s?(x)"
  ],
  transform: {
    "^.+\\.tsx?$": "ts-jest/legacy"
  },
  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.test.json",
      useESM: true
    }
  }
};

[cwadrupldijjit]

That Buffer.from error isn't one that I'm too concerned about, though it seems like I will have to explicitly load my .env file in order to get that to work.

[cwadrupldijjit]

When poking around, it would seem that, though the TypeScript + Node ESM requires the .js extension in order to work when running the application normally, (ts-)jest seems to not find a literal .js file and fails it for that instead of loading a .ts file, compiling it, and then using the result in the test. That was all that was missing for one of the tests so that's passing now, but for the other tests, it's still failing either because of not being able to resolve a local dependency of that file (because of the .js extension) or because it's not resolving the dependency correctly (like the jsonwebtoken imports).

[cwadrupldijjit]

I was considering that perhaps a custom resolver that simply wraps the vanilla resolver code could work, possibly checking if there isn't a .js file there first before changing the extension to .ts if that does exist (and could probably be expanded to a .jsx/.tsx scenario, too). That might just work enough for the local module issues.

I'm still not sure about the packages, however. That seems a bit wrong to me, as the documentation and type definitions both support that it's being done correctly, so long as the interop is working how it's supposed to. I'm wondering if there's something wrong with resolving the node module inside of jest itself or if something else is wrong.

[ahnpnl]

Cannot find module ... is related to Jest resolver. ts-jest doesn't do anything with it as we only compile ts to js. next tag doesn't change the way how existing code compilation works so I think this is a problem which pops up when switching to Jest 28.

[cwadrupldijjit]

This error was happening before updating to Jest 28 and I don't know that the jest resolver is supposed to resolve .ts modules even though it expects to resolve .js ones like TypeScript itself does. Unless there is a code transformation that needs to be tweaked before Jest even gets it?

I can't adjust the .js extensions out of the imports in the files I'm testing without breaking the main application, so that's not an option.

[laurisvan]

Thanks! Adding /legacy to something does not sound very future-proof, though :-D

We plan a refactoring to switch to esbuild/swc as default for v28. Marking the current codes as legacy to ensure that we still have a backup with and let users have more time to adopt to new one.

While esbuild is great (we are using it selectively), please note that it is not 100% compatible with many experimental (yet widely used) TypeScript features. For example, we are using emitDecoratorMetadata which esbuild author has stated is impossible to support. That feature is needed by several libraries (I think Angular and next.js, but I'm not 100% sure about that - we are using graphql-modules that needs it).

AFAIK one of SWC authors stated to reimplement tsc in golang, but that work has only started. I believe we will be stuck with "legacy" mode for quite a while...

[ahnpnl]

Thanks! Adding /legacy to something does not sound very future-proof, though :-D

We plan a refactoring to switch to esbuild/swc as default for v28. Marking the current codes as legacy to ensure that we still have a backup with and let users have more time to adopt to new one.

While esbuild is great (we are using it selectively), please note that it is not 100% compatible with many experimental (yet widely used) TypeScript features. For example, we are using emitDecoratorMetadata which esbuild author has stated is impossible to support. That feature is needed by several libraries (I think Angular and next.js, but I'm not 100% sure about that - we are using graphql-modules that needs it).

AFAIK one of SWC authors stated to reimplement tsc in golang, but that work has only started. I believe we will be stuck with "legacy" mode for quite a while...

Thanks for the information. Indeed I ran into a few issues with esbuild regarding to code transformation too. Perhaps having an option to allow using TypeScript API as a fallback is a safe way.

[cwadrupldijjit]

I smashed together a resolver wrapping the default resolver for jest, just changing the extensions to .ts if the .js is not found and the .ts file does exist. It's definitely not been extensively tested, but now the only problems that I'm encountering are the .env not loading (which is something I can address) and the proper import of the node modules. Will continue digging to figure out what else I need to do.

[jlarmstrongiv]

Is there a way to hide the warning:

ts-jest[ts-jest-transformer] (WARN) Use 'ts-jest' entry point in v28 will resolve in refactored transformer. If you wish to use legacy transformer, please adjust your Jest 'transform' config. For example:
     module.exports = {
        transform: {
           '^.+\\.tsx?$': 'ts-jest/legacy'
        }
     }

I have already added ts-jest/legacy, but the warning remains.

[ahnpnl]

The warning has been reverted in #3466 :)

[ahnpnl]

After I updated to "ts-jest": "^28.0.0-next.3" I get this error.

 FAIL   Client tests  views/Home/Home.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/username/Desktop/nextjs-prisma-boilerplate/node_modules/@hookform/resolvers/zod/dist/zod.module.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import{appendErrors as r}from"react-hook-form";import{validateFieldsNatively as e,toNestError as o}from"@hookform/resolvers";var n=function(e,o){for(var n={};e.length;){var s=e[0],t=s.code,i=s.message,a=s.path.join(".");if(!n[a])if("unionErrors"in s){var u=s.unionErrors[0].errors[0];n[a]={message:u.message,type:u.code}}else n[a]={message:i,type:t};if("unionErrors"in s&&s.unionErrors.forEach(function(r){return r.errors.forEach(function(r){return e.push(r)})}),o){var c=n[a].types,f=c&&c[s.code];n[a]=r(a,o,n,t,f?[].concat(f,s.message):s.message)}e.shift()}return n},s=function(r,s,t){return void 0===t&&(t={}),function(i,a,u){try{return Promise.resolve(function(o,n){try{var a=Promise.resolve(r["sync"===t.mode?"parse":"parseAsync"](i,s)).then(function(r){return u.shouldUseNativeValidation&&e({},u),{errors:{},values:r}})}catch(r){return n(r)}return a&&a.then?a.then(void 0,n):a}(0,function(r){return{values:{},errors:r.isEmpty?{}:o(n(r.errors,!u.shouldUseNativeValidation&&"all"===u.criteriaMode),u)}}))}catch(r){return Promise.reject(r)}}};export{s as zodResolver};
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React, { FC } from 'react';
      2 | import { useForm } from 'react-hook-form';
    > 3 | import { zodResolver } from '@hookform/resolvers/zod';
        | ^
      4 | import { postSearchSchema } from 'lib-server/validation';
      5 | import { getErrorClass, withBem } from 'utils/bem';
      6 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1773:14)
      at Object.<anonymous> (components/SearchInput/SearchInput.tsx:3:1)

I think this is expected because this is Jest error. ts-jest only transforms things. If Jest doesn’t give the file to ts-jest, we can’t transform it. This is typical error about a file is not transformed to the correct module syntax yet for Jest to process.

[nemanjam]

I think this is expected because this is Jest error. ts-jest only transforms things. If Jest doesn’t give the file to ts-jest, we can’t transform it. This is typical error about a file is not transformed to the correct module syntax yet for Jest to process.

Yes, this is issue with @hookform/resolvers/zod.

react-hook-form/resolvers#396

[The-Code-Monkey]

So im doing the steps mentioned above with the ts-jest/legacy, using the next version and im setting NODE_OPTIONS=--experimental-vm-modules as im using esm, and i keep getting this error

 ReferenceError: exports is not defined

      1 | import { render, waitFor, screen } from '@testing-library/react';
    > 2 | import * as React from 'react';

any clue on how to fix this

[ahnpnl]

So im doing the steps mentioned above with the ts-jest/legacy, using the next version and im setting NODE_OPTIONS=--experimental-vm-modules as im using esm, and i keep getting this error

 ReferenceError: exports is not defined

      1 | import { render, waitFor, screen } from '@testing-library/react';
    > 2 | import * as React from 'react';

any clue on how to fix this

Not sure what it is, maybe you can try to reproduce with our example React app https://github.com/kulshekhar/ts-jest/tree/main/examples/react-app ? I think that error might be related to Jest resolver, or something which contains exports which is not transformed properly.

[The-Code-Monkey]

might be the testing lib as they are the only import in that file.

[The-Code-Monkey]

Yeah just changed it to this instead.

      1 | import { render, waitFor, screen } from '@testing-library/react/dist/@testing-library/react.esm.js';
    > 2 | import React from 'react';

and i got

ReferenceError: exports is not defined

[ahnpnl]

I think something with testing-library which Jest cannot process, this is not ts-jest issue.

[scott-lc]

@ahnpnl - I've run into the exports is not defined issue numerous times. For me, clearing the Jest cache fixed the issue.

npx jest --clearCache

[The-Code-Monkey]

@scott-lc I've just cleared the cache and im still getting

$ cross-env NODE_OPTIONS=--experimental-vm-modules tcm test
(node:43508) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  src/__test__/Icon.test.tsx
  ● Test suite failed to run

    ReferenceError: exports is not defined

      1 | import { render, waitFor, screen } from '@testing-library/react';
    > 2 | import * as React from 'react';
        |                       ^
      3 |
      4 | import { Icon } from '../Icon';

is there anything else that you think might help?

edit: strange if i switch the imports around i get this

    ReferenceError: exports is not defined

      1 | import * as React from 'react';
    > 2 | import { render, waitFor, screen } from '@testing-library/react';
        |                       ^
      3 |
      4 | import { Icon } from '../Icon';
      5 |

[ahnpnl]

@The-Code-Monkey would be nice if you can provide a reproduce repo here. We have an example app for React https://github.com/kulshekhar/ts-jest/tree/main/examples/react-app you can use this to put your reproduce scenario.

[The-Code-Monkey]

I've actually just fixed it, it seems it was because I wasn't using, the globals object in my jest config. This hidden thing wasn't really documented anywhere in the readme might be good to add it

[ahnpnl]

Probably you didn't check the online doc https://kulshekhar.github.io/ts-jest/docs/guides/esm-support

[tnrich]

Still doesn't seem to work out of the box with jest v29 for me..

[glasser]

This was an issue about v28, not v29...

[tnrich]

@glasser well looks like ts-jest is still having the same issue with v29 as with v28

[Smrtnyk]

@tnrich do you have a reproducer?