Jest has an issue when trying to import the library

[iamBevan]

Current Behavior

When trying to run Jest in a repo that is importing vanilla-colorful, I get the following error message: "Cannot use import statement outside a module"

Steps to Reproduce

1. Import vanilla-colorful into project
2. Try to run Jest

Context (Environment)

• vanilla-colorful 0.7.2
• jest 27.5.1
• vue 2.6.14

Detailed Description

Currently I am importing vanilla-colorful in to a Vue project. When I try to run Jest I get the following error message:

I have tried what Jest suggests; adding experimental decorators and get the following message:

I have also tried tried adding vanilla-colorful as a custom transformIgnorePattern.

Any insight on this would be appreciated, thanks.

[web-padawan]

Hi, this is likely an issue with Jest configuration. AFAIK it has some issues with using ES modules.
The component has correct fields in package.json indicating that is a ES module package:

vanilla-colorful/package.json

Lines 16 to 17 in d2afae1

	"module": "hex-color-picker.js",
	"type": "module",

Here is an example of using transformIgnorePatterns with a set of packages, hope it helps.

[woahitsjc]

Got it working by using one of the approaches from https://gist.github.com/rstacruz/511f43265de4939f6ca729a3df7b001c

Method A got rid of the issue by:

• Running a jest script with cross-env required: NODE_OPTIONS=--experimental-vm-modules
• Making sure to use dynamic import: import("vanilla-colorful")

[web-padawan]

Thanks for sharing! I will try it myself and consider adding this solution to README. The only thing that looks confusing is the need for dynamic import.

[woahitsjc]

@web-padawan I spoke too soon. When running jest in CI, getting memory leak.

Possibly the same issue as on either of these:
jestjs/jest#11438
jestjs/jest#11956

[web-padawan]

Got it, thanks. BTW, have you tried Vitest that uses happy-dom implementation instead of jsdom used by Jest?
It should be much easier to get it working with Vanilla Colorful because of built-in ES modules support.