This is something that should be able to be addressed.

Would it be possible to provide some details on a unit test case that would require styles? It does appear that a browser is being used but application of styles may not work in other cases (jsdom usage, for instance).

For context, an option to bypass all style processing has been considered to avoid the overhead of processing the styles which in the majority of cases would not affect a typical unit test. Better understanding various use cases would help to evaluate the tradeoffs of such an option.

The inclusion of styles helps with the consistency between actual deployment and test debugging.

With Karma, the regression tests are run against ChromeHeadless and the manual tests for debugging are run against Chrome. The reason for the use of an actual browser vs. jsdom is not only related to consistency but also to eliminate issues related to mocking features such as ResizeObserver.

In addition, many of the tests include ag-grid with generates many warnings like:
AG Grid: error #9 No value for --ag-row-height. This usually means that the grid has been initialised before styles have been loaded. The default value of 42 will be used and updated when styles load.

I believe an option to turn off style processing and inclusion would be good for some other projects to improve performance when using jsdom. However, I believe the default (at least in browser mode) should be to turn on processing and inclusion to simplify the migration to and usage of the unit-test runner.

Since the processing is already enabled, it would be great to also include the resulting styles.css in case of browser mode for now. This would allow us to continue our migration efforts.

To temporary work around the issue, you can load the stylesheet styles.css programmatically.

In angular.json, add the following json element

test.options.providersFile: "test-providers.ts"

In test-providers.ts, add

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/styles.css';
document.head.appendChild(link);

export default [];

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}