Addon Test: Correctly stop Storybook when Vitest closes

[JReinhold]

Closes #28890

What I did

Noticed that when we start Storybook as part of running Vitest, Storybook contains a nested list of 3 child processes. So when the Storybook process was killed at the end of a Vitest run, only the root SB process was killed, and the rest stayed alive, including the one that actually listens on the port.

Using node-tree-kill to kill the entire process tree fixed the issue.

I'm not a huge fan of the solution, I'd rather like to understand why Storybook has multiple child processes, and figure out why they aren't killed when the root process is killed. But I couldn't find anywhere in the code where we explicitly spawn new child processes.

EDIT: 👆 We figured it out. Storybook doesn't have multiple processes, but when doing spawn('yarn storybook dev', { shell: true }), it spawns a process for Yarn, which spawns a node process with with Storybook, which is why there are multiple nested processes.

Checklist for Contributors

Testing

1. Create a sandbox in the monorepo
2. Ensure no Storybook is already running
3. Go into it and run yarn vitest run Button
4. Run lsof -i :6006
5. You shouldn't see any output because no process should still be listening on port 6006

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.7 MB	77.7 MB	26.8 kB	8.09	0%
initSize	133 MB	133 MB	26.8 kB	1.02	0%
diffSize	55.1 MB	55.1 MB	0 B	1	0%
buildSize	6.87 MB	6.87 MB	0 B	0.51	0%
buildSbAddonsSize	1.51 MB	1.51 MB	0 B	1.04	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.86 MB	0 B	1.22	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.57 MB	3.57 MB	0 B	1.16	0%
buildPreviewSize	3.3 MB	3.3 MB	0 B	0.45	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.8s	22s	14.1s	2.9	🔺64.4%
generateTime	19.2s	20.2s	937ms	-0.06	4.6%
initTime	12.3s	13.1s	831ms	-0.24	6.3%
buildTime	9s	8.7s	-246ms	-0.62	-2.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.3s	4.2s	-1s -64ms	-1.37	🔰-25.1%
devManagerResponsive	3.8s	3.1s	-723ms	-1.49	🔰-22.8%
devManagerHeaderVisible	530ms	452ms	-78ms	-1.62	🔰-17.3%
devManagerIndexVisible	560ms	479ms	-81ms	-1.52	🔰-16.9%
devStoryVisibleUncached	1.8s	1.7s	-86ms	-0.13	-5%
devStoryVisible	593ms	525ms	-68ms	-1.11	-13%
devAutodocsVisible	496ms	419ms	-77ms	-1.47	🔰-18.4%
devMDXVisible	506ms	421ms	-85ms	-1.34	🔰-20.2%
buildManagerHeaderVisible	587ms	486ms	-101ms	-1.09	-20.8%
buildManagerIndexVisible	665ms	574ms	-91ms	-1.07	-15.9%
buildStoryVisible	527ms	451ms	-76ms	-1.06	-16.9%
buildAutodocsVisible	461ms	370ms	-91ms	-1.43	🔰-24.6%
buildMDXVisible	442ms	361ms	-81ms	-1.62	🔰-22.4%

Greptile Summary

Added the tree-kill package to properly terminate all Storybook child processes when running with Vitest, replacing the previous process termination logic in global-setup.ts with a more robust solution.

• Added tree-kill dependency in code/addons/test/package.json for process tree termination
• Modified code/addons/test/src/vitest-plugin/global-setup.ts to use tree-kill for complete process cleanup
• Fixes issue where child Storybook processes remained alive after Vitest completion
• Addresses port 6006 remaining occupied after test runs

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 3e51714. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected -t check -c production --parallel=7
• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[greptile-apps]

_{2 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

logic: error message is incomplete - should include the actual error details

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: 3e51714, ran on 10 December 2024 at 21:59:00 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/angular

	Before	After	Difference
Dependency count	259	259	0
Self size	362 KB	362 KB	0 B
Dependency size	34.54 MB	34.56 MB	🚨 +23 KB 🚨
Bundle Size Analyzer	Link	Link