Downshift breaks jest testing

[gerhardsletten]

Downshift@9.x added an exports to package.json:

"exports": {
  ".": {
    "import": "./dist/downshift.esm.js",
    "require": "./dist/downshift.cjs.js",
    "types": "./typings/index.d.ts",
    "default": "./dist/downshift.esm.js"
  },
  "./react-native": {
    "require": "./dist/downshift.native.cjs.js",
    "types": "./typings/index.d.ts"
  }
},

This makes jest import the esm and not the cjs version. This can be handled by adding this jest-config:

"transformIgnorePatterns": [
  "node_modules/(?!(downshift|@babel/runtime)/)"
],

But because the esm-file contain direct imports to other esm-packages they will give and error for the nested dependency

import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
import _extends from '@babel/runtime/helpers/esm/extends';
import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';

The error:

 Must use import to load ES Module: node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js

We are using @swc/jest

"transform": {
  "^.+\\.(ts|js|tsx|jsx)$": "@swc/jest",
  "^.+\\.css$": "<rootDir>/test/style-mock.js"
},

Anyone able to get it working with jest?

[charliematters]

Seeing similar results in Vitest:

Module .../node_modules/downshift/dist/downshift.esm.js:1 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "downshift" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    server: {
      deps: {
        inline: [
          "downshift"
        ]
      }
    }
  }
}