Jest: transformIgnorePatterns causes errors for npm linked packages

[richburdon]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Running simple tests works. Running tests that import npm linked packages causes errors; e.g.,

jest sanity
Couldn't find preset "react-native" relative to directory "demo/sub/ux/node_modules/my-linked-module/node_modules/react-apollo"

(My modules have no direct dep on "react-native", but there's a transitive dep via "react-apollo")

But, babel (and webpack and karma) all work fine. Also, jest works fine in the dependent module (my-linked-module).

babel-node src/web/sanity.test.js
OK

If the current behavior is a bug, please provide the steps to reproduce and either a repl.it demo through https://repl.it/languages/jest or a minimal repository on GitHub that we can yarn install and yarn test.

Create a dependency on another module via npm link.
Import that module in a test (ES6 syntax):
Add: "transformIgnorePatterns": [ "/!node_modules\/my-linked-module/" ] to package.json

What is the expected behavior?
It should compile OK

Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.
jest: v19.0.2
node: v7.5.0
OSX 10.2

package.json
"jest": {
"verbose": true,
"transformIgnorePatterns": [
"/!node_modules\/my-linked-module/"
]
},

.babelrc
{
"presets": [
"es2015",
"stage-0",
"react"
],

"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}

[richburdon]

The workaround is to install the transitive dependency in the current module:
npm install --save-dev babel-preset-react-native

[thymikee]

Not sure if that's causing a problem (because Jest cannot resolve the name, not some unknown tokens in read file), but transformIgnorePatterns takes an array of RegExps, not globs. You rather need to use it like this:

{
  "transformIgnorePatterns": [
    "node_modules/(?!react-native|my-linked-module)/"
  ]
}

Also, could you provide a repo with the issue? You could add linking step to npm scripts.

[zurgul]

@thymikee I have the same problem, and configuration you provided
"node_modules/(?!react-native|my-linked-module)/" works fine, however transformation ignores scoped packages, e.g.
"node_modules/(?!@myscopedpackages)" won't be affected by transform module.

[thymikee]

@zurgul Interesting, I use it with a scoped package @ngrx here and it works just fine.

[zurgul]

@thymikee it seems the problem might be with bundled babel-jest. Since

Note: babel-jest is automatically installed when installing Jest and will automatically transform files if a babel configuration exists in your project.

I do not specify custom "transform" option. If transformIgnorePatterns option is mentioned but empty it tries to process all packages in node_modules, so generally transformation works, but ignores packages in "scoped" folder

[thymikee]

Are you able to provide a repository with a repro?

[zurgul]

@thymikee I debugged Jest and found the cause. transformIgnorePatterns works fine, the problem appears because ScriptTransformer uses a local babelrc configuration file. Main project is aware of Jest, so I have the following in babelrc:
"test": { "plugins": [ "transform-es2015-modules-commonjs" ] }
However scoped sub-projects know nothing about global test environment, so there is no configuration for "test", therefore transformation doesn't affect es6 imports. After I updated babelrc with commonjs plugin everything works fine. I don't know if it's intended functionality to use local babelrc instead of global?

[thymikee]

cc: @cpojer

[victornoel]

I am using jest-preset-angular with typescript and had the same problem.
Following @zurgul comment, I looked at the code of ts-jest and noticed that it was enabling transform-es2015-modules-commonjs when allowSyntheticDefaultImports is enabled in the typescript config.

So I enabled it and it solved my problem (caused by angular2-notifications).

EDIT: I was wrong, I got confused by the cache of jest and thought it was the thing that resolved my problem but not at all… shame on me :)

[ravicious]

@zurgul:

After I updated babelrc with commonjs plugin everything works fine.

How exactly did you solve that problem? 🤔 Did you add the plugin to package.json of the imported package under babel.env.test.plugins? I can't seem to get it to work.

[zurgul]

@ravicious
We have babel-preset package with default babel configuration. I added there env.test.plugins section and also added dependency to package.json, so it became available for all other subprojects.

So, short answer is yes, I added env.test and dependency to the imported package. Make sure that you run Jest with --no-cache parameter.

[ravicious]

I made a repro. The package foo imports the linked package bar which imports react-text-mask (I chose this lib because this is one that's causing problems for me). foo has its babel config, but when you run jest, it'll crash with the following error:

$ "/Users/rav/Projects/jest-issue-3285-repro/packages/foo/node_modules/.bin/jest" 
 FAIL  __tests__/index-test.js
  ● Test suite failed to run

    Couldn't find preset "es2015" relative to directory "/Users/rav/Projects/jest-issue-3285-repro/packages/foo/node_modules/bar/node_modules/react-text-mask"

      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
      at Array.map (native)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.412s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ravicious]

Edit: Nvm, I just read https://github.com/babel/babel/issues/4539.

@zurgul: Hmm, I tried to add env.test.plugins, but jest seems to not pick this option up. I have this in my custom babel preset (@foo/babel-preset-core):

module.exports = {
  presets: [
    [require('babel-preset-env'), { targets: { uglify: true }, modules: false }],
    require('babel-preset-react'),
    require('babel-preset-stage-1'),
  ],
  env: {
    test: {
      plugins: [require('babel-plugin-transform-es2015-modules-commonjs')],
    },
  },
}

And then in the package.json of one of my packages I have this:

  "babel": {
    "presets": [
      "@foo/babel-preset-core"
    ]
  },

With that, jest tests fails due to syntax error on import statements. If I add env.test.plugins directly to the package.json, everything works fine, but I'd rather not have to remember to add it to each package.

[davidpelayo]

Any hints on what was the solution for this?

[mtrabelsi]

What about this - it solved mine :
.babelrc

{
  "presets": ["react-native"]
}

package.json

{
  "name": "reportApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-native": "0.53.0",
    "react-navigation": "^1.0.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-jest": "^22.2.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react-native": "^4.0.0",
    "jest": "^22.2.1",
    "jest-react-native": "^18.0.0",
    "react-test-renderer": "^16.2.0",
    "reactotron-react-native": "^1.14.0"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation)"
    ]
  }
}