New Jest integration doesn't work with stylePreprocessorOptions

[Varixo]

Command

test

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

New test builder @angular-devkit/build-angular:jest doesn't work with configured stylePreprocessorOptions option in build.

Minimal Reproduction

First add:

"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",

1. change in angular.json to jest test runner "builder": "@angular-devkit/build-angular:jest",
2. add some paths to stylePreprocessorOptions with includePaths
3. run ng test

or here is the repo:
https://github.com/Varixo/angular-jest-stylepreprocessoroptions-error

Exception or Error

✘ [ERROR] Can't find stylesheet to import.
  ╷
1 │ @use 'test';
  │ ^^^^^^^^^^^
  ╵
  src\app\app.component.scss 1:1  root stylesheet [plugin angular-sass]

    src/app/app.component.ts:3:33:
      3 │ ...CLI_RESOURCE__1 from "angular:jit:style:file;./app.component.scss";

Your Environment

Angular CLI: 16.0.0
Node: 18.12.1
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 16.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.0
@angular-devkit/build-angular   16.0.0
@angular-devkit/core            16.0.0
@angular-devkit/schematics      16.0.0
@schematics/angular             16.0.0
rxjs                            7.8.1
typescript                      5.0.4

Anything else relevant?

No response

[dgp1130]

I'm surprised this is compiling anything related to stylesheets, we deliberately skip all that with Jest since it isn't needed. browser-esbuild might be doing something automatically which we'll need to opt out of for Jest.

[maximLyakhov]

Had to use relative imports, instead of alias to even start jest.
Also all generated chunks report following

[BABEL] Note: The code generator has deoptimised the styling of {{path}}/chunk-{{hash}}.mjs as it exceeds the max of 500KB.

    ReferenceError: require is not defined

    ReferenceError: __NG_CLI_RESOURCE__0 is not defined

[infodusha]

We could probably still try to pass it for now since @angular-devkit/build-angular:karma has this option. At least you probably want to check you styles can be compiled. If you just ignore it, you can end up with broken build and valid tests.

[marek-siemieniuk-morawski]

I can confirm we face this issue in our project as well but we use @angular-devkit/build-angular:browser, not browser-esbuild

[janpauldahlke]

been here done that, lurking

[rojasjandro89]

Alright, that renders this experimental feature useless in my case.

I have to maintain multiple libraries with collections of mixins and functions. Using stylePreprocessorOptions is the only way of aliasing the import of SCSS files.

Also, styles are a crucial part of a component's behavior. Removing them from the context of a test is a mistake imho.

[andreibereczki]

I get the same scss import errors on various @use statements (which work with the @angular-devkit/build-angular:browser builder).

I'm surprised this is compiling anything related to stylesheets, we deliberately skip all that with Jest since it isn't needed. browser-esbuild might be doing something automatically which we'll need to opt out of for Jest.

I would be interrested where in the angular-cli codebase the removal of css happens. I tried reading through it, but it's beyond my ability to fully comprehend :) Could you or someone point that out?
Also a timeline for when a fix for browser-esbuild will be implemented (or at least an analysis started) would be very useful. Without any solution to this, we can't really test this awesome integration out :(

[achrysanthakopoulou]

I face the same problem, but isn't there a way to exclude all scss files (temporarily at least) ?

[apangr]

I have the same problem, any solution?

[alebx]

You could temporarily npx patch-package yourself in node_modules/@angular-devkit/build-angular/src/builders/jest/index.js and pass stylePreprocessorOptions as build param.

[davidgg]

I'm facing this issue too, since it doesn't affects the execution of my tests and just experiencing the console errors.

Switching to absolute routes fixes the original issue, but would be nice to have the stylePreprocessorOptions available.

[ricardojbertolin]

Same issue here!
Since Karma is no longer supported we have moved our project to Jest, and as a result we have changed a lot of "@use" rule paths to relative on our sass files.
IMHO this is not a "minor" issue. The workaround exists but is really tedious.
Thanks in advance

[Maryannah]

Reviving this thread, for me the error happens at compilation time (before running the tests)
Which I guess is expected since I cannot provide a stylePreprocessorOptions to my configuration.

Can't complain about it since it's experimental, but a fix would be awesome !