How to write Jest transformIgnorePatterns

Question

I have this excpetion

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • 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/en/configuration.html

    Details:

    C:\Code\SPFx\BCO\node_modules\@microsoft\sp-core-library\lib\index.js:11
    export { default as _BrowserDetection } from './BrowserDetection';
    ^^^^^^

    SyntaxError: Unexpected token export

      19 | } from 'office-ui-fabric-react/lib/Utilities';
      20 | import { IUserProvider } from "../UserProviders/IUserProvider";
    > 21 | import {
         | ^
      22 |   Environment,
      23 |   EnvironmentType
      24 | } from '@microsoft/sp-core-library';

      at ScriptTransformer._transformAndBuildScript (node_modules/jest/node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/webparts/BCO/components/EmployeeSelector/EmployeeSelector.tsx:21:1)
      at Object.<anonymous> (src/webparts/BCO/components/FieldMapping/FieldMapping.tsx:13:1)

And tried these transformIgnorePatterns expressions in config.json

"transformIgnorePatterns": [
  "\\node_modules\\@microsoft\\sp-dialog",
  "\\node_modules\\@microsoft\\sp-core-library",
  "node_modules/(?!sp-core-library)",
  "node_modules/(?!@microsoft/sp-core-library)"
],

and none of them worked. I run this on Windows 10 so I tried also this format

Anyone have a clue how to resolve this issue? In my case, I have components that extend Vuetify components (aka import { VDataTable } from 'vuetify/lib'). The JEST documentation is seriously lacking on this complex configuration. More practical, common examples would be helpful. — RashadRivera, Oct 16 '20 at 20:57
Try `"@microsoft[/\\]sp-dialog"` or more likely `"@microsoft[/\\\\]sp-dialog"`. I believe it needs to be double escaped here. — Estus Flask, Mar 04 '21 at 07:11

Riceball LEE · Answer 1 · 2020-04-01T00:49:12.587

8

The transformIgnorePatterns means if the test path matches any of the patterns, it will not be transformed.

Note: DO NOT SPLIT MULTI-LINES.

The jest will ignore all node_modules via default.

So you must write like this:

"transformIgnorePatterns": [
  // all exceptions must be first line
  "/node_modules/(?!@microsoft/sp-core-library|sp-dialog|other_libs_need_transform)"
],

edited Apr 01 '20 at 00:49

answered Oct 05 '19 at 08:29

Riceball LEE

1,541
18
18

score 3 · Answer 2 · answered Oct 23 '20 at 18:58

3

Actually, it seems like typescript is not going well with JEST test cases, so what i feel like either JEST need to ignore those files or those packages need to be transpiled to js code which JEST can understand,

you can try this

"transformIgnorePatterns": [ "node_modules/(?!(@microsoft/sp-core-library))" ],

and in tsconfig.json

"allowJs": true,

for more details please check this post

https://github.com/SharePoint/sp-dev-docs/issues/2325#issuecomment-446416878

answered Oct 23 '20 at 18:58

Vinay Rajput

83
1
9

1

just want to highlight from this answer the `"allowJs": true` at `tsconfig.json`. In my case this was exactly what I was missing and no one was mentioning it. Thanks @Vinay ! – Manu Artero Aug 01 '22 at 08:18

score 0 · Answer 3 · edited Apr 27 '21 at 19:02

I had a similar error while working on a project with jest, webpack, and vanilla js, so that error is thrown when jest encounters this line of code import '../css/styles.css'; in any /*?.js$/ file.

I solved it by moving the jest configurations from the package.json file into a jest.config.js file with the following minimal configuration:

// jest.config.js
module.exports = 
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

Then in babel.config.js:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

How to write Jest transformIgnorePatterns

3 Answers3

Linked