Jest has some problems with Shoelace library

Question

In StencilJs I imported Shoelace library in my component like this:

import module from '@shoelace-style/shoelace/dist/components/card/card';
if (!customElements.get('sl-card')) customElements.define('sl-card', module);

and in test I get this error:

SyntaxError: Cannot use import statement outside a module.

Do you have any idea why Shoelace components cause this error in jest?

Answer 1

You need to enable ESM. Jest has experimental support but you need to opt in to it:

1. Ensure you either disable code transforms by passing transform: {} or otherwise configure your transformer to emit ESM rather than the default CommonJS (CJS).
2. Execute node with --experimental-vm-modules, e.g. node --experimental-vm-modules node_modules/jest/bin/jest.js or NODE_OPTIONS=--experimental-vm-modules npx jest etc.. On Windows, you can use cross-env to be able to set environment variables.
3. Beyond that, we attempt to follow node's logic for activating "ESM mode" (such as looking at type in package.json or .mjs files), see their docs for details.
4. If you want to treat other file extensions (such as .jsx or .ts) as ESM, please use the extensionsToTreatAsEsm option.