[Bug]: "Jest encountered an unexpected token" from chalk v5 imported into setupFiles

Version

27.4.3

Steps to reproduce

NB this is not a “minimal” reproduction, but will reproduce the problem. I hope the issue may be clear from the description. If it’s not clear and a reduced reproduction will help with tracking the problem down I’ll be happy to try and make one.

Repo: https://github.com/carbon-design-system/ibm-cloud-cognitive

Steps to obtain expected behaviour:

• clone the repo.
• run yarn to install dependencies.
• run yarn test:c4p settings (for example).
• the test case should run successfully and 5 tests will pass.

Steps to reproduce problem:

• clone the repo if not already done.
• edit config/jest-config-ibm-cloud-cognitive/package.json and change line 37 "chalk": "^4.1.2", to "chalk": "^5.0.0",.
• run yarn to install dependencies.
• run yarn test:c4p settings (for example).
• the test case will not run successfully because of a problem loading the jest config.

Expected behavior

The jest config used for these tests is in config/jest-config-ibm-cloud-cognitive/index.js. This specifies a setupFilesAfterEnv setting which is config/jest-config-ibm-cloud-cognitive/setup/setupFilesAfterEnv.js. This file imports ‘chalk’ in order to apply colours to various console outputs it can produce. It does this as follows:

import '@testing-library/jest-dom';

import chalk from 'chalk';
import util from 'util';

import * as matchers from './matchers';

When the version of ‘chalk’ installed is 4.1.2, this works ok.

Actual behavior

When the version of ‘chalk’ installed is 5.0.0, the error “Jest encountered an unexpected token” occurs while processing the setupFilesAfterEnv.

The problem appears to be the use of import (import ansiStyles from '#ansi-styles' on line 2 of chalk/source/index.js). In v5.0.0, ‘chalk’ has switched to ESM. However, ‘chalk’ is being imported from setupFilesAfterEnv.js, and the ‘chalk’ package.json correctly identifies itself as "type": "module", so I could not immediately see why this was not working.

Additional context

No response

Environment

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  npmPackages:
    jest: ^27.4.3 => 27.4.3

[dcwarwick]

Thank you @ahnpnl: I had read that document, but was unsure whether that was what was needed, since I wasn’t especially wanting to use ESM modules for tests. However, I can see that the setupFiles files might load in the same context as the tests, so using a depenedency from setupFiles that needs the ESM mode might mean switching jest entirely to ESM mode. That document, though, is over a year old, and quite a lot of node.js versions behind, and I think it is somewhat too terse to be really useful to someone who doesn’t already pretty much know and understand the answers!

For example, I updated my yarn scripts to include the NODE_OPTIONS=--experimental-vm-modules, and set "type": "module" in my shared jest-config project. That certainly enabled the chalk v5 to be loaded, but introduced a whole set of other problems which I have not been able to entirely resolve.

I had to fix some uses of require.resolve() in my jest config, and that was easy enough. However, I use this shared config from several packages, and they each require() the shared config into their jest.config.js – I replaced the require() with import(), but it seems that import() freezes the imported config object, and jest-config likes to update its own rootDir field, so I got a series of “TypeError: Cannot add property rootDir, object is not extensible” errors which took a bit of tracking down. I didn’t see this documented anywhere, and in the end figured it out by reading the source code for jest-config! In the end I have switched to using module.exports = { ...import('jest-config-ibm-cloud-cognitive') }; in my jest.config.js files to ensure that the config object is mutable. I don’t know if this is the best approach, but it seems to work so far as it goes.

However, some of my tests use enzyme functions directly, like shallow(), and these are now giving “Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.” errors. Manually adding enzyme initialisation lines to my setupFiles didn’t help. Also, a great many of my tests involve React components, and these do not seem to be processing the JSX imports correctly. Any time the React component files do an import of assets, like SVG or PNG files, this is producing a stack of “Jest failed to parse a file.” errors.

These must be common scenarios: is there a more complete “how-to” that explains how to convert jest tests that use enzyme and React components etc to load as ESM modules? Or am I pushing too far ahead here with an experimental feature that’s not yet quite ready, and would be better of locking chalk to v4 for the time being and returning to this when the ESM capability is more mature?

[ahnpnl]

https://jestjs.io/docs/ecmascript-modules