From aef8b0d0f2f628eecddda88bc1664d8fc4006610 Mon Sep 17 00:00:00 2001 From: Peter Macdonald Date: Thu, 18 Dec 2025 16:47:36 +0100 Subject: [PATCH 1/4] add jest types for jest migration Signed-off-by: Peter Macdonald --- docs/tutorials/jest30-migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorials/jest30-migration.md b/docs/tutorials/jest30-migration.md index 8d5f803fb5..51f32561e1 100644 --- a/docs/tutorials/jest30-migration.md +++ b/docs/tutorials/jest30-migration.md @@ -9,7 +9,7 @@ Starting with a recent version of `@backstage/cli`, `jest` is a peer dependency. You can choose to install either Jest 29 or Jest 30. The built-in Jest version before this change was Jest 29, however, we recommend that you switch to Jest 30. Upgrading will solve the `Could not parse CSS stylesheet` errors, allow you to use MSW v2 in web packages, and ensure that you remain compatible with future versions of the Backstage CLI. Support for Jest 29 is temporary, with the purpose of allowing you to upgrade at your own pace, but it will eventually be removed. - **Jest 29**: Install `jest@^29` and `jest-environment-jsdom@^29`. No migration needed, but you may see `Could not parse CSS stylesheet` warnings/errors when testing components from `@backstage/ui` or other packages using CSS `@layer` declarations. -- **Jest 30**: Install `jest@^30`, `@jest/environment-jsdom-abstract@^30`, and `jsdom@^27`. Fixes the stylesheet parsing warnings/errors, but requires the migration steps below. +- **Jest 30**: Install `jest@^30`, `@types/jest@^30`, `@jest/environment-jsdom-abstract@^30`, and `jsdom@^27` in your root `package.json`. Fixes the stylesheet parsing warnings/errors, but requires migration steps. ## Migration Guide From dc678e44696ad46247ce39d6ed81f38e33614127 Mon Sep 17 00:00:00 2001 From: Peter Macdonald Date: Thu, 18 Dec 2025 16:51:32 +0100 Subject: [PATCH 2/4] slight rewording Signed-off-by: Peter Macdonald --- docs/tutorials/jest30-migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorials/jest30-migration.md b/docs/tutorials/jest30-migration.md index 51f32561e1..d7e88098d0 100644 --- a/docs/tutorials/jest30-migration.md +++ b/docs/tutorials/jest30-migration.md @@ -9,7 +9,7 @@ Starting with a recent version of `@backstage/cli`, `jest` is a peer dependency. You can choose to install either Jest 29 or Jest 30. The built-in Jest version before this change was Jest 29, however, we recommend that you switch to Jest 30. Upgrading will solve the `Could not parse CSS stylesheet` errors, allow you to use MSW v2 in web packages, and ensure that you remain compatible with future versions of the Backstage CLI. Support for Jest 29 is temporary, with the purpose of allowing you to upgrade at your own pace, but it will eventually be removed. - **Jest 29**: Install `jest@^29` and `jest-environment-jsdom@^29`. No migration needed, but you may see `Could not parse CSS stylesheet` warnings/errors when testing components from `@backstage/ui` or other packages using CSS `@layer` declarations. -- **Jest 30**: Install `jest@^30`, `@types/jest@^30`, `@jest/environment-jsdom-abstract@^30`, and `jsdom@^27` in your root `package.json`. Fixes the stylesheet parsing warnings/errors, but requires migration steps. +- **Jest 30**: Install `jest@^30`, `@types/jest@^30`, `@jest/environment-jsdom-abstract@^30`, and `jsdom@^27` in your root `package.json`. Fixes the stylesheet parsing warnings/errors, but requires the migration steps below. ## Migration Guide From 13c093afb3f8db10fc1da4396a57a7c03a744ec7 Mon Sep 17 00:00:00 2001 From: Peter Macdonald Date: Fri, 19 Dec 2025 11:03:23 +0100 Subject: [PATCH 3/4] add copy paste commands Signed-off-by: Peter Macdonald --- docs/tutorials/jest30-migration.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/tutorials/jest30-migration.md b/docs/tutorials/jest30-migration.md index d7e88098d0..f9eec59add 100644 --- a/docs/tutorials/jest30-migration.md +++ b/docs/tutorials/jest30-migration.md @@ -9,8 +9,19 @@ Starting with a recent version of `@backstage/cli`, `jest` is a peer dependency. You can choose to install either Jest 29 or Jest 30. The built-in Jest version before this change was Jest 29, however, we recommend that you switch to Jest 30. Upgrading will solve the `Could not parse CSS stylesheet` errors, allow you to use MSW v2 in web packages, and ensure that you remain compatible with future versions of the Backstage CLI. Support for Jest 29 is temporary, with the purpose of allowing you to upgrade at your own pace, but it will eventually be removed. - **Jest 29**: Install `jest@^29` and `jest-environment-jsdom@^29`. No migration needed, but you may see `Could not parse CSS stylesheet` warnings/errors when testing components from `@backstage/ui` or other packages using CSS `@layer` declarations. + +```sh +# in your repository root, run: +yarn add --dev jest@^29 @types/jest@^29 jest-environment-jsdom@^29 +``` + - **Jest 30**: Install `jest@^30`, `@types/jest@^30`, `@jest/environment-jsdom-abstract@^30`, and `jsdom@^27` in your root `package.json`. Fixes the stylesheet parsing warnings/errors, but requires the migration steps below. +```sh +# in your repository root, run: +yarn add --dev jest@^30 @types/jest@^30 @jest/environment-jsdom-abstract@^30 jsdom@^27 +``` + ## Migration Guide The examples below are issues we encountered while migrating the Backstage repository. For a complete list of breaking changes, see the official documentation: From 7804f74070034d18d637dc798f3a7b221633c714 Mon Sep 17 00:00:00 2001 From: Peter Macdonald Date: Fri, 19 Dec 2025 11:30:59 +0100 Subject: [PATCH 4/4] tweaking Signed-off-by: Peter Macdonald --- docs/tutorials/jest30-migration.md | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/docs/tutorials/jest30-migration.md b/docs/tutorials/jest30-migration.md index f9eec59add..ea79b03009 100644 --- a/docs/tutorials/jest30-migration.md +++ b/docs/tutorials/jest30-migration.md @@ -8,19 +8,27 @@ Starting with a recent version of `@backstage/cli`, `jest` is a peer dependency. You can choose to install either Jest 29 or Jest 30. The built-in Jest version before this change was Jest 29, however, we recommend that you switch to Jest 30. Upgrading will solve the `Could not parse CSS stylesheet` errors, allow you to use MSW v2 in web packages, and ensure that you remain compatible with future versions of the Backstage CLI. Support for Jest 29 is temporary, with the purpose of allowing you to upgrade at your own pace, but it will eventually be removed. -- **Jest 29**: Install `jest@^29` and `jest-environment-jsdom@^29`. No migration needed, but you may see `Could not parse CSS stylesheet` warnings/errors when testing components from `@backstage/ui` or other packages using CSS `@layer` declarations. +- **Jest 29**: -```sh -# in your repository root, run: -yarn add --dev jest@^29 @types/jest@^29 jest-environment-jsdom@^29 -``` + ```bash + # in your repository root, run: + yarn add --dev jest@^29 @types/jest@^29 jest-environment-jsdom@^29 + ``` -- **Jest 30**: Install `jest@^30`, `@types/jest@^30`, `@jest/environment-jsdom-abstract@^30`, and `jsdom@^27` in your root `package.json`. Fixes the stylesheet parsing warnings/errors, but requires the migration steps below. + Pros: No migration needed -```sh -# in your repository root, run: -yarn add --dev jest@^30 @types/jest@^30 @jest/environment-jsdom-abstract@^30 jsdom@^27 -``` + Cons: You may see `Could not parse CSS stylesheet` warnings/errors when testing components from `@backstage/ui` or other packages using CSS `@layer` declarations + +- **Jest 30**: + + ```bash + # in your repository root, run: + yarn add --dev jest@^30 @types/jest@^30 @jest/environment-jsdom-abstract@^30 jsdom@^27 + ``` + + Pros: Fixes the stylesheet parsing warnings/errors + + Cons: Requires migration steps (see below) in your tests ## Migration Guide