Can't use nextjs package with next/jest

We have Next.js application that uses the next/jest configurator to set up jest in a good way for Next projects. Recently we added the @piwikpro/next-piwik-pro package to our app, as recommended by the Piwik docs. Tracking is working fine, but the integration tests are failing. The error message from Jest is

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /...redacted... /node_modules/@piwikpro/next-piwik-pro/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { PiwikProProvider, usePiwikPro } from './core';

It seems that the import statement from the next-piwik-pro package is not appreciated by jest, and that this occurs because node_modules are never transpiled when using next/jest.

I’m certainly not an expert in these matters, but would it be possible to include a commonjs build with the npm package? Or maybe there is another way to work around this?

I have tried several different approaches, including manipulating the the config generated from nextJest (failed because the return type not a basic object but something complicated with a bunch of async things) and running jest in ESM mode. Could not make any progress with that.

I’ve worked around this by using DataLayer etc from the react package instead of the next package, which seems to be working fine. I’m not sure why the next package can’t use the same build setup as the react package?

@klaseen we’ll try to reproduce this issue and provide some feedback.

@klaseen just to make sure - did you try the steps described here?

That link provides a bit of general info on how to handle issues with importing ESM libraries into Next.js.

Yes, we do the transpilation in the app and it works. What is going on here is an incompatibility between jest and the next package. I’m not an expert here, but I believe Jest is mainly running in a node environment and their support for ESM is “experimental”. Hence the need for transpilation. In this specific case, though, the configurator supplied by Next disallows thanspiling anything in node_modules and that’s where it goes wrong. Since the react package is working fine, maybe it is a matter of adding a commonjs output to the next package so it can be integrated with jest more easily?

@klaseen Thanks for you patience. We reproduced the issue you reported and updated the example app provided with our library by adding few jest tests (we used transformIgnorePatterns in jest config to work around the problem you had).

In order to implement the changes you proposed and, most importantly, to verify whether it is even feasible with the current setup of our library we need some time.
We will get back to you as soon as we have a working solution.

Sounds good,

do you have a link to that example? Our problem is that the default next/jest setup does not allow us to NOT ignore the piwik package, since all node_modules are ignored by default.

the code is in this PR: fix: fixed example app build by mmalczewski · Pull Request #8 · PiwikPRO/next-piwik-pro · GitHub