Create-react-app: Allow customization of Jest: transformIgnorePatterns

[amandapouget]

There are a ton of issues about this, and after two hours of reading through them all, I still wasn't able to get a sense of the state of things.

• It seems that some Jest config options are now available: https://github.com/facebookincubator/create-react-app/pull/1830
• Please make transformIgnorePatterns also available.

We have a case where we have local libraries that are brought into node_modules, but then Jest stumbles whenever we import them, because it is not pre-processing the React components in node_modules. Transpiling our components before export is not an option because the constant transpiling every time one makes a change is a serious drag on development.

Some discussion threw out symlinks as a solution or workaround, but another developer on our team sunk many hours into that before finally getting stuck again.

There has to be a simple way to make LibraryA/MyReactComponent go into MyApp/node_modules, such that MyApp/src/MyComponent can import MyReactComponent during tests without any problems.

It would seem to be a common use case.

[gaearon]

Could you explain more about how transformIgnorePatterns would help? Have you verified (e.g. by manually changing node_modules/react-scripts/utils/createJestConfig) that this particular option would help? What did you set it to?

Is this related to https://github.com/facebookincubator/create-react-app/issues/607?

[amandapouget]

Yes. I manually changed the transformIgnorePatterns to just an empty array, as a test case:

    transformIgnorePatterns: [
      // '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'
    ],

I also had to change:
node_moldules/jest-config/build/defaults:

  transformIgnorePatterns: [], // removed NODE_MODULES_REGEXP

It ran a lot slower, obviously, since that caused it to preprocess EVERYTHING in the node_modules folder. But it finally ran without any “UnexpectedToken <“ errors.

With the ability to customize this, I could add to package.json a regular expression that would cause it to pre-process everything in node_modules except the subfolder containing my local libraries. As it stands, the createJestConfig requires Jest to skip pre-processing everything in node_modules, which puts us in the position of constantly having to transpile…

To get an idea of the size of the problem, we have 10 different local libraries. We were having to transpile to export every time we changed one line of code. I basically listened to my computer whirr all day long, and saw it eat through 25% of a brand new solid state drive in three months (because of the near constant writing and re-writing to disk) before we finally said enough to the transpiling.

But now we’re in a position where we can’t run a Jest test on anything that imports anything that ultimately imports a React component from another library.

On Jun 14, 2017, at 7:07 PM, Dan Abramov [e-mail] wrote:

Could you explain more about how transformIgnorePatterns would help? Have you verified (e.g. by manually changing node_modules/react-scripts/utils/createJestConfig) that this particular option would help? What did you set it to?

Is this related to #607 https://github.com/facebookincubator/create-react-app/issues/607?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/facebookincubator/create-react-app/issues/2537#issuecomment-308582971, or mute the thread https://github.com/notifications/unsubscribe-auth/AMQpjMHaavuyI9I2e2jQ8p6STygdw5O9ks5sEGemgaJpZM4N6iYN.

[gaearon]

Is there any chance you could share what was the issue with symlinks?

[amandapouget]

Unfortunately, no. The person who went down the long path there is no longer on the project… Could you point me toward good documentation for how to use symlinks to solve this problem?

On Jun 14, 2017, at 7:48 PM, Dan Abramov [e-mail] wrote:

Is there any chance you could share what was the issue with symlinks?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/facebookincubator/create-react-app/issues/2537#issuecomment-308589382, or mute the thread https://github.com/notifications/unsubscribe-auth/AMQpjBLCw8A-H_VC4wN60OzCUmfL8gJoks5sEHFRgaJpZM4N6iYN.

[gaearon]

I’m not entirely sure myself. Unfortunately I’m overloaded with React work right now and can’t look at this in very close future, but this feedback is helpful. We know sharing components between apps is pretty important. If you could describe your setup in more detail (how many apps, how many components they share, your folder layout) this would help for future work.

[amandapouget]

```
Foo

• node_modules
• 
  
  • Bar
  
  
• - - MyUntranspiledReactComponent

• src
• 
  
  • MyJestTestedComponentWhichImportsMyUntranspiledReactComponent
    
    * Jest configuration with create-react-app prevents you from transforming files in node_modules via customizing transformIgnorePatterns, so “UnexpectedToken <“ is thrown.*
  
  

Bar

• src
• 
  
  • MyUntranspiledReactComponent
    
    * Does not transpile when copied to Foo/node_modules because constantly transpiling in development is not possible given the volume of folders. *
  
  

We have approximately 20+ libraries encompassing several hundred modules all following this structure. Many of the libraries depend on each other as well, compounding the file-transpile-and-copy problem.

Symlinks (to avoid copying) or being able to use Jest transformIgnorePatterns (to avoid transpiling before copying to Foo/node_modules) would both be helpful solutions.

On Jun 14, 2017, at 7:52 PM, Dan Abramov [e-mail] wrote:

I’m not entirely sure myself. Unfortunately I’m overloaded with React work right now and can’t look at this in very close future, but this feedback is helpful. We know sharing components between apps is pretty important. If you could describe your setup in more detail (how many apps, how many components they share, your folder layout) this would help for future work.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/facebookincubator/create-react-app/issues/2537#issuecomment-308589954, or mute the thread https://github.com/notifications/unsubscribe-auth/AMQpjK7jpo0fNTew4IshlmNR-78L_RMMks5sEHJZgaJpZM4N6iYN.

[gaearon]

I see, thanks. Again, we don't have any immediate solution to this, but I feel free to participate in https://github.com/facebookincubator/create-react-app/issues/1492.

[adrianblynch]

I have the same issue with an ejected app. Components in node_modules that need to be transpiled by Jest/Babel.

I ended up changing transformIgnorePatterns to:

["/node_modules/(?!(our-react-components-.*?\\.js$))"]

Now JS files in our-react-components-* folders in node_modules are being transpiled.

I understand the discussion is around a non-ejected app, I just wanted to give a solution to those that don't mind ejecting.

[SunLn]

Thanks a lot.
@adrianblynch, you really help me .

[gaearon]

I think https://github.com/facebookincubator/create-react-app/issues/1333 is the first step here. It might not be sufficient for your particular use case but we'll implement it first and can then take feedback on how to expand it.

[michaeldewolf85]

@gaearon This isn't the production domain so while I agree with all the methodology, why wouldn't we let developers supply their own test config if they want/need to? I'm happy to submit a patch if it's worthwhile.

[michaeldewolf85]

As far as I can tell the alternative is that everyone has to eject if they need to develop tests that import a custom dependency that they are developing using an ES6-only npm module that is linked to npm via a git repo (or equivalent).

[Primajin]

We make use of OpenLayers, so sadly we need to eject every project, just to be able to have transformIgnorePatterns as an option. There should be a way to pass this down.

[john-goldsmith]

@Primajin @michaeldewolf85 @mandysimon88 It's true that the transformIgnorePatterns option is currently not available via the jest property in package.json, however, you can still tap into Jest's configuration options without ejecting using the CLI:

npm test -- --transformIgnorePatterns "node_modules/(?!(your-untranspiled-module|some-other-module)/)"

Via the docs:

Every one of Jest's Configuration options can also be specified through the CLI.

Note: CLI options take precedence over values from the Configuration.

That last bit is what tipped me off (maybe a documentation improvement @gaearon). Obviously configuring Jest via package.json doesn't work, and my jest.config.js seemed to get trumped by CRA's Jest config, so CLI args was the saving grace. Hope that helps!

[bogdosarov]

@john-goldsmith, you are my hero.

[Primajin]

Hmm weird, I always get

● Unrecognized CLI Parameter:

  Unrecognized option "transformIgnorePatterns \"node_modules/(?!(ol|jss-global)/)\"".

  CLI Options Documentation:
  https://facebook.github.io/jest/docs/en/cli.html

and there is no such parameter on that page.

[bogdosarov]

@Primajin In my case, all works without any errors.
How I use this parameter in package.json:
"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!ui-core)/\" --env=jsdom"

[shinriyo]

@bogdosarov
Did you resolve?

``
FAIL src/containers/App.test.tsx
● Test suite failed to run

/Users/me/path/node_modules/decimal.js/decimal.mjs:4789
export var Decimal = clone(DEFAULTS);
^^^^^^

SyntaxError: Unexpected token export

```

[LiangMingChen]

this is a awful work around, if you have 10 module, the default command is just going to get huge. You might as well declare that we allow all customization and ask everyone to bypass
https://github.com/facebook/create-react-app/blob/49e258b4a6d04fb7e3542d7a060c6dcad4093564/packages/react-scripts/scripts/utils/createJestConfig.js#L73