search

thymikee / jest-preset-angular

Jest configuration preset for Angular projects.
https://thymikee.github.io/jest-preset-angular/
MIT License
884 stars 303 forks source link

[Feature]: optional styles testing #1712

Closed dzonatan closed 4 months ago

dzonatan commented 2 years ago

🚀 Feature Proposal

I see there was once a partial support for this which was later removed. It would be nice to bring this support back together with styleUrls resolver, at least as an option.

Motivation

Example

No response

dzonatan commented 2 years ago

After fiddling around I found that it had a full support including styleUrls at some point but was reverted due to <...>some syntaxes are not processed by Jest.<...>. What are those syntaxes, could you elaborate @ahnpnl? I'm willing to spend some time on this.

ahnpnl commented 2 years ago

IIRC the problem was processing different style extension files .sass, .css, .scss with importing other style files and Jest cannot process them. For example

@use 'foo';

@include foo.bar();

The @use 'foo'; causes the problem. Maybe using esbuild to process style files can make Jest happy, not so sure.

nvh95 commented 2 years ago

Thank you @dzonatan for opening this and @ahnpnl for your context. I am the author of jest-preview and I am about to open a similar issue to request this feature. I also open an issue in my repo to track this Support styleUrls and styles for Angular. If possible, I invite you guys (maintainers of jest-preview-angular) to take a look at that issue.

Briefly, jest-preview is a new library that gives users a visual debugging experience when writing tests in Jest. It previews the UI of a Jest test to a browser like Chrome. By doing that, it increases the productivity of frontend engineers when they debug a failed test or write a new test. It was initially designed to work well with react, but it's a framework-agnostic and we are working to support more frameworks (e.g: Angular). You can see a working example of jest-preview + Angular here.

Jest Preview Demo

jest-preview depends heavily on Jest Code Transformation. In this case, jest-preset-angular for Angular apps. So it will be super nice if jest-preset-angular supports processing styles via styleUrls and styles out of the box (a flag to opt-in is a decent solution).

What do you think of supporting this? I absolutely can help with this feature with some support from you guys.

Thank you very much. Also, thank you for creating and maintaining a wonderful library.

cc: @thymikee

ahnpnl commented 4 months ago

Currently, this is not possible because the code transformation here is doing file per file and each Jest worker doesn't know anything about the other workers which make it not possible to retrieve full information of other CSS files.