Jest: transformIgnorePatterns doesn't work

[aslanovsergey]

🐛 Bug Report

I have this exception

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 https://jestjs.io/docs/en/cli.html#jest-regexfortestfiles

Run npx envinfo --preset jest

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i5-4460S CPU @ 2.90GHz
Binaries:
npm: 5.10.0 - C:Program Filesnodejsnpm.CMD

[SimenB]

Could you put together a repo we can pull down to reproduce?

[alexkrolick]

I'm having this issue after upgrading to babel 7 - appears the babelrc option for the test env is not being applied to the excluded modules

[aslanovsergey]

Hi @SimenB, I uploaded a demo. please look at https://github.com/aslanovsergey/Jest-Demo-transformIgnorePatterns

[tscislo]

I have exactly the same issue. When I put some invalid regex in transformIgnorePatterns it throws an error so I'm sure that it uses it, but when I try to really exclude something it is not possible. Is that a Jest issue or am I doing sth wrong? Thanks!

[ikiyou]

Having the same exact problem. @aslanovsergey, @alexkrolick, @tscislo - did any of you find a fix?

[apsitos]

I'm having the same issue. Any updates?
UPDATE: found this comment, which seems to have worked.

[SimenB]

@aslanovsergey sorry about the delay, finally found some time to dig a bit into your repo.

You have at least 2 issues in configuration: You do not pass js files to ts-jest, and you haven't told tsc to compile JS files. The following diff fixes it (you could also use babel-jest to compile JS if you want):

diff --git i/package.json w/package.json
index 6cf2af6..4c66bc7 100644
--- i/package.json
+++ w/package.json
@@ -42,7 +42,7 @@
   "jest": {
     "verbose": true,
     "transform": {
-      "^.+\\.(ts|tsx)$": "ts-jest"
+      "^.+\\.(js|ts|tsx)$": "ts-jest"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(ts?|tsx?)$",
     "moduleFileExtensions": [
diff --git i/tsconfig.json w/tsconfig.json
index f13ec27..b12a712 100644
--- i/tsconfig.json
+++ w/tsconfig.json
@@ -10,6 +10,7 @@
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "outDir": "lib",
+    "allowJs": true,
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"

However, the file is still not transpiled because of how Jest uses the ignore pattern. See the following snippet: https://github.com/facebook/jest/blob/v23.6.0/packages/jest-runtime/src/script_transformer.js#L484-L502, specifically new RegExp(config.transformIgnorePatterns.join('|')).

const patterns = [
  'node_modules\\@microsoft\\sp-dialog',
  'node_modules/(?!sp-dialog)',
  'node_modules/(?!@microsoft/sp-dialog)'
].join('|');

new RegExp(patterns).test(
  '/home/user/project/Jest-Demo-transformIgnorePatterns/node_modules/@microsoft/sp-dialog/lib/index.js'
); // logs true

However, the pattern works correctly if you combine it into a single one: "node_modules/(?!(@microsoft/sp-dialog|@microsoft/office-ui-fabric-react-bundle))".

Running that correctly transpiles your code, but you get a runtime error when executing:

Can't help you with that one.

(The stack trace is messed up, not sure why...)