Skip to content

fix(@angular/build): support injecting global styles into vitest unit-tests #30498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 11, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 51 additions & 27 deletions packages/angular/build/src/builders/unit-test/builder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -224,37 +224,61 @@ export async function* execute(
{
// Disable configuration file resolution/loading
config: false,
root: workspaceRoot,
project: ['base', projectName],
name: 'base',
include: [],
reporters: normalizedOptions.reporters ?? ['default'],
watch: normalizedOptions.watch,
coverage: {
enabled: !!normalizedOptions.codeCoverage,
reporter: normalizedOptions.codeCoverage?.reporters,
excludeAfterRemap: true,
exclude: normalizedOptions.codeCoverage?.exclude,
},
...debugOptions,
},
{
test: {
root: outputPath,
globals: true,
setupFiles,
// Use `jsdom` if no browsers are explicitly configured.
// `node` is effectively no "environment" and the default.
environment: browser ? 'node' : 'jsdom',
watch: normalizedOptions.watch,
browser,
reporters: normalizedOptions.reporters ?? ['default'],
coverage: {
enabled: !!normalizedOptions.codeCoverage,
reporter: normalizedOptions.codeCoverage?.reporters,
excludeAfterRemap: true,
},
...debugOptions,
},
plugins: [
{
name: 'angular-coverage-exclude',
configureVitest(context) {
// Adjust coverage excludes to not include the otherwise automatically inserted included unit tests.
// Vite does this as a convenience but is problematic for the bundling strategy employed by the
// builder's test setup. To workaround this, the excludes are adjusted here to only automatically
// exclude the TypeScript source test files.
context.project.config.coverage.exclude = [
...(normalizedOptions.codeCoverage?.exclude ?? []),
'**/*.{test,spec}.?(c|m)ts',
];
name: 'angular:project-init',
async configureVitest(context) {
// Create a subproject that can be configured with plugins for browser mode.
// Plugins defined directly in the vite overrides will not be present in the
// browser specific Vite instance.
await context.injectTestProjects({
test: {
name: projectName,
root: outputPath,
globals: true,
setupFiles,
// Use `jsdom` if no browsers are explicitly configured.
// `node` is effectively no "environment" and the default.
environment: browser ? 'node' : 'jsdom',
browser,
},
plugins: [
{
name: 'angular:html-index',
transformIndexHtml() {
// Add all global stylesheets
return (
Object.entries(result.files)
// TODO: Expand this to all configured global stylesheets
.filter(([file]) => file === 'styles.css')
.map(([styleUrl]) => ({
tag: 'link',
attrs: {
'href': styleUrl,
'rel': 'stylesheet',
},
injectTo: 'head',
}))
);
},
},
],
});
},
},
],
Expand Down