Jest cannot find module 'zx/globals'

[OlaoluwaM]

Expected Behavior

I believe the zx globals should be loaded when running tests with jest on a zx script.

Actual Behavior

The zx/globals module is not found when testing zx scripts. This happens with a TS file as well as a .mjs one

Steps to Reproduce the Problem

1. Write a zx ts or mjs script, make sure to include import 'zx/globals' in either scripts
2. Setup jest and import the function from the script you wish to test
3. Run the test

Specifications

• Version: 5.0.0
• Platform: Linux (Fedora 35)

[OlaoluwaM]

Reference for anyone who stumbles upon this. @antonmedv seems like the way jest resolves imports for the chalk lib is rather wonky since the chalk lib aliases some imports in its package.json, which jest doesn't know about.

Here is the solution.

TLDR

Add the following to your jest config

  moduleFileExtensions: [...otherFileExtensionsInYourProject, 'mjs'],
  moduleNameMapper: {
    "#ansi-styles": "<rootDir>/node_modules/zx/node_modules/chalk/source/vendor/ansi-styles/index.js",
    "#supports-color": "<rootDir>/node_modules/zx/node_modules/chalk/source/vendor/supports-color/index.js"
  }

For the curious

1. First, jest by default does not resolve .mjs modules. This is easy to fix using the moduleFileExtensions property in your jest config. Override the defaults and add mjs to the array
2. Now to the meat of it all. Notice that after doing this, if you run your tests, jest will error out saying
   Cannot find module '#ansi-styles' from 'node_modules/zx/node_modules/chalk/source/index.js'
3. Notice how '#ansi-styles' is preceded by a hashtag? This means there is something afoot. If you peek into the index.js file for zx's chalk dependency (located in your node_modules/zx/node_modules/chalk/source dir ), you will find this import

import ansiStyles from '#ansi-styles';
import supportsColor from '#supports-color';

4. Hmm, they still contain hashtags, and hovering over them doesn't display an absolute path like usual. Could they be aliases? Head to the chalk package.json, and you will discover that those two hashtag imports are aliases. Sadly, I don't think jest can resolve these kinds of things (I may be wrong, though).
5. There will always be corner cases that the jest resolver misses. From this point, you have two options
   • Write your resolver like the badass you are or,
   • Tell jest what to map these imports to manually using the moduleNameMapper property in your config
6. Going with the second option, when jest stumbles upon those hashtag imports, it will refer back to the entries of the moduleNameMapper object. If it finds keys that match those imports, it will use the values for those keys in place of those imports. Taking advantage of that, we can pass the correct path to the modules referenced by #ansi-styles and #supports-color. The paths you specify should be relative to YOUR root directory.
7. It should look something like this

  moduleNameMapper: {
    "#ansi-styles": "<rootDir>/node_modules/zx/node_modules/chalk/source/vendor/ansi-styles/index.js",
    "#supports-color": "<rootDir>/node_modules/zx/node_modules/chalk/source/vendor/supports-color/index.js"
  }

That's it! Now go test that script :)