[Feature]: optional styles testing

[dzonatan]

🚀 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

• to have a better support for custom jest matchers like toBeVisible from the testing-library as they heavily rely on css rules;
• better integration with jest-preview.

Example

No response

[dzonatan]

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]

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]

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 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]

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.