Using nuqs with Jest in a CommonJS project

[alexgorbatchev]

Not really sure why extra effort was put in place to make it difficult to use nuqs in a CommonJS environment. Here's how to get it to work in Jest in a CommonJS project:

// jest.config.js
module.exports = {
  resolver: `${__dirname}/resolver.js`,
}

// resolver.js
const path = require('path');

module.exports = (request, options) => {
  if (request.startsWith('nuqs')) {
    const [_, ...rest] = request.split('/');
    const subPath = rest.join('/');
    const nuqsPath = path.dirname(require.resolve('nuqs'));
    return path.join(nuqsPath, 'dist', `${subPath}.js`);
  }

  return options.defaultResolver(request, options);
};

[Csszabi98]

I have ran into the same problem using jest and sunk too much time into resolving it. The thing is enabling Jest ESM Support is far from straight forward and it is still experimental, so it would be nice to provide a way by the package authors to run the package with esm transpilation through jest out of the box.

Meanwhile your solution did work for me with a few additions:

// jest.config.js
const esModules = ['nuqs'].join('|')

/* eslint-disable */
export default {
  resolver: `${__dirname}/jest-resolver.js`,
  // Tell jest to transpile es modules.
  // This is usually enough for esm only packages, but since the package provides a commonjs 
  // export that always throws we have to explicitly force the usage of the esm bundle.
  // Hence the custom resolver above.
  transformIgnorePatterns: [`node_modules/(?!(?:.pnpm/)?(${esModules}))`],
}

// jest-resolver.js
const path = require('path')
// Note: Default resolver can be grabbed from elsewhere if needed. For instance via nx:
// const defaultResolver = require('@nx/jest/plugins/resolver')

module.exports = (request, options) => {
  if (request.startsWith('nuqs')) {
    const [, ...rest] = request.split('/')
    const subPath = rest.join('/') || 'index' // Added || 'index'
    const nuqsPath = path.dirname(require.resolve('nuqs'))

    return path.join(nuqsPath, 'dist', `${subPath}.js`)
  }

  return options.defaultResolver(request, options)
}

[maxmarcon]

First of all: thank you so much for writing nuqs, this library is just amazing.

To the problem above: I'm running into the same issues testing my nextjs application with jest. Having ESM-only packages is usually not a problem, I just add them to the transpilePackages list in my next.config.ts file and Bob's your uncle. Like this:

transpilePackages: [
  "esm-only-package-1",
  "esm-only-package-2",
]

This works great for all my esm-only packages. However when I add nuqs to the list and run jest I still get the error:

This package is ESM only.
      See https://err.47ng.com/NUQS-101 for more details.

Why doesn't this work for nuqs? As folks said above, ESM support in jest is experimental. Allowing user to transpile the package would be very nice and wouldn't prevent anyone from enabling ESM support if they want to.

Or maybe I'm doing something wrong and there is indeed a way to allow jest+nextjs to transpile it?

Ok I did read the answer above more accurately and I now think I see why the module can't be transpiled out of the box... Any change of getting rid of the commonjs export that always throws?

[franky47]

Any chance of getting rid of the commonjs export that always throws?

Yes, it's gone in #996 and shipped in beta, feel free to try it: npm i nuqs@beta.

Otherwise we have the Jest+ESM docs: https://nuqs.47ng.com/docs/testing#jest-and-esm

[maxmarcon]

Thanks a lot! I tried it, transpilation works as expected now