Scaling Unit tests with NX

[joshlperry]

As the amount of applications has grown in our NX repo, containing a shared components library. When updating a shared component this is triggering at least 8 projects from 'nx affected:apps' to start running unit tests resulting in a growing issue of increased time to test (40+ minutes on the pipeline). We have looked into 'jest --onlyChanged' which is supported by NX however we'd like a solution that would run tests in our applications that use that shared component.

How do we better specify what tests to run?
Curious to see what options we have.

[LayZeeDK]

Either make more granular shared libraries or I think you have to live with this.

[endymion1818]

The issue is with our shared UI library. It's not the kind of thing that we want to split out into smaller libraries.

[LayZeeDK]

Why not?

[endymion1818]

They are all interrelated components. We have single responsibility items ("Atoms"), which are things like <input> and <button> elements, which are then used by larger components ("Molecules"), which are then composed up into the largest set ("Organisms").

All of these use a common foundation of colors and other settings (our "theme"). And this library is then used to render the UI in each of our apps.

Because they're so closely dependent on each other, it seems like they belong together.

[skydever]

I have kind of the same problem, and I think about refactoring the structure of my apps and libs. Are there any tools/generators/schematics for that kind of thing?

like nx move <componente> --to=my-shared-lib2/<sub-dirs>/:

• moving the component
• fix imports the component is using
• remove export from old lib
• add export to new lib
• update imports where the component is used
• fix ng module imports
  • remove module from app/lib module when not used within module anymore
  • add module to ng imports where component is used

.. or just something to get a component/class based graph within the lib and usages of outside the lib? more granular than app/lib dependencies?

[LayZeeDK]

If you're using Angular, check out ng-samurai.