Add jest and its environment dependencies as devDependencies to the
create-app template, so new Backstage apps are set up with Jest 30
support out of the box.
For Jest 30, apps need @jest/environment-jsdom-abstract and jsdom
instead of jest-environment-jsdom.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Since jest is now a peer dependencies, users must add it as a
devDependency themselves. This commit adds early detection and
a helpful error message when jest is missing, directing users
to the migration guide.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
The "should render an onClick based context menu item" test was
failing intermittently due to a race condition where the test
would interact with the menu before the entity route parameters
were fully resolved.
Fix by adding explicit waits:
- Wait for entity to load before clicking the menu button
- Wait for menu to open before asserting on menu items
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Migrates test files in config-loader, events-node and kubernetes-react
packages from MSW 1.x to MSW 2.x API to fix compatibility issues with
Jest 30 and JSDOM v26.
Changes:
- Updated msw dependency from ^1.0.0 to ^2.0.0
- Changed imports from `rest` to `http` and `HttpResponse`
- Converted handler syntax from `res(ctx.*)` to `HttpResponse.*`
- Changed `toStrictEqual` to `toEqual` for response assertions
Affected packages:
- @backstage/config-loader
- @backstage/plugin-events-node
- @backstage/plugin-kubernetes-react
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Move jest from dependencies to peer dependencies, allowing users to
choose between Jest 29 and Jest 30.
The CLI now detects the Jest version at runtime and uses the
appropriate environment:
- Jest 29: Uses standard jest-environment-jsdom
- Jest 30: Uses a custom environment based on @jest/environment-jsdom-abstract
with fixes for Web API globals (fetch, streams, Error, etc.)
The cross-fetch polyfill is only injected for Jest 29, as with Jest 30+
our patched Jest environment is used. The network request blocker is made
MSW-compatible by checking if fetch was wrapped before blocking.
Jest 30 (with jsdom v27) fixes `Could not parse CSS stylesheet`
warnings/errors when testing components from @backstage/ui or other
packages using CSS `@layer` declarations.
New peer dependencies (install based on your Jest version):
- jest (required, ^29 or ^30)
- Jest 29 requires: jest-environment-jsdom
- Jest 30 requires: @jest/environment-jsdom-abstract, jsdom
Production code changes for jsdom 27 testability:
- AppIdentityProxy: extract navigateToUrl method for spying
- LiveReloadAddon: export utils.reloadPage for spying
- collect.ts: export internal.resolvePackagePath for mocking
MockFetchApi: evaluate global.fetch at call time instead of construction
time, allowing MSW to patch fetch after MockFetchApi is constructed.
Test adaptations for jsdom 27:
- Use RGB values instead of named colors in CSS assertions
- Update error format expectations (hyphenated type names, SyntaxError
instead of FetchError for JSON parse errors)
- Simplify URL error assertions for cross-version compatibility
- Fix accessible name whitespace handling for external links
- Use history.replaceState for location mocking (non-configurable)
- Use fireEvent.blur for contentEditable elements
- Move async assertions inside waitFor for race conditions
- Remove Blob.prototype.text polyfill (now native)
- Remove test case using credentials in plugin:// URLs
Test adaptations for Jest 30:
- Replace `expect.objectContaining([...])` with direct array equality
- Replace `expect.objectContaining({ length: N })` with
`expect.any(Array)` + separate `toHaveLength()` assertions
- Use child process for native Node.js module resolution in
collect.test.ts to work around Jest 30's resolver behavior
- Update snapshot headers for new Jest format
Also removes the jest-haste-map patch which is no longer needed.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
The catalogAboutEntityCard was calling useProps() for all icon links
before checking filters, causing hooks with side effects to execute
for all entity types. This fix reverses the order to check the filter
first, then only call useProps() if the filter passes.
This prevents unnecessary side effects like API calls, auth flows, or
state updates from running for icon links that won't be displayed.
Signed-off-by: Tommy Le <tommy_le@outlook.com>
Johan Persson