Jest slows down quite a bit with semantic-ui-react

[vidarc]

Is this a bug report?

Possibly. Tests slow down considerably when using a component with a semantic-ui-react component.

Did you try recovering your dependencies?

Did a fresh app creation and rm -rf node_modules yarn.lock. Same issue. Using yarn 1.6.0

Reproducible Demo

https://github.com/vidarc/jest-slow-down

Install and run the test. The single test will take 3+ seconds. Remove the Container tag and import in App.js and run the test again. Test will be 1 second or less.

Ran the test:debug script and saw that it looks like jest (or something) is trying to bring in all of semantic-ui-react, instead of just the component being imported. Increases the start up and clean up time considerably. Seems like this shouldn't be the expected behavior.

Unsure if this is a CRA, semantic-ui-react, or jest issue.

[andrewdodd]

I am also seeing this issue. I am not sure where the fault lies, but it is something to do with the way the importing works.

If I replace your line:

import { Container } from 'semantic-ui-react'

with a direct import like this:

import Container from 'semantic-ui-react/dist/commonjs/elements/Container'

then the test time is much shorter.

Additionally, the semantic-ui-react docs mention "Semantic UI React imports will be not optimized, so we recommend to use babel-plugin-direct-import in your builds. You can find example configuration in examples/webpack3 directory." NB: Based on the changes here (Semantic-Org/Semantic-UI-React#2561) the babel-plugin-lodash appears to the way to get this to work again???

Unfortunately, I cannot figure out what is the current "best" way to achieve this for a CRA based app using SemanticUI-React. Is it at webpack config item? A plugin like babel-plugin-transform-semantic-ui-react-imports or babel-plugin-direct-import (which appears to be deprecated?).

Issues like #1653 seem related, but I can't really tell what the outcome of that issue is. Dan mentions that if you "write granular imports", then this problem should be solved. I guess that it is something to do with the way CRA and SemanticUI-react interact?

This comment also mentions a technique, but I can't get it to work for me.

[Timer]

There's nothing we can do to help fix this, the issue would lie under Jest or Semantic -- in the future when Jest supports ES-Modules (and Node) this will be less of an issue, but there's nothing we can do now to optimize this -- sorry!