v 8.0.2 won't work in jest tests while 7.0.1 did: Jest encountered an unexpected token

[erikrenberg]

In my create-react-app app (not Typescript) I use jest for tests. With 7.0.1 this works, but with 8.0.2 tests fail for components that use react-debounce-render.

Perhaps this is a jest configuration issue, but I still like to ask if react-debounce-render has been packaged/built/minified the right way in the npm package?

The reason I'm asking is the output from the test and the actual source in node_modules\react-debounce-render:

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.
....

C:\dev\app\node_modules\react-debounce-render\dist\index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,jest){import React, { Component } from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module

I compared the old version's node_modules\react-debounce-render\lib\index.js and it is very different. It does not import React but starts like this:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.debounce = void 0;

Thanks!

[podefr]

Hi Erik, thanks for raising the issue.

this tool has been rewritten with v8 for better TypeScript support and... I haven't tested the packaged version for use in non TypeScript environments.
Would you mind creating a minimal codebase that replicates the issue, happy to take a look at it.

Thanks!
Olivier

[erikrenberg]

Thanks for the reply, and sorry for the delay!

I solved / worked around the problem: If I add the following snippet to package.json the test works again with jest:

"jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!(react-debounce-render))"
    ]
  }

This makes jest ignore transforms in node_modules (which also is the default), except for react-debounce-render which needs to be transformed/transpiled in its currently published state in npm. See https://jestjs.io/docs/configuration#transformignorepatterns-arraystring

I realized this when I found the following issue in Axios, which has the same open issue. I'm not sure if the best way to solve it is to transpile the package before you publish it to npm? (I know too little about this). I guess that if Axios end up fixing it it somehow, you could see how they solve it. axios/axios#5026

I did create a minimal test case. Let me know if you still want that. Thanks!