[Bug] Peer dependency version crashes test-runner

[t4ckermann]

Describe the bug

When I try to run the test-runner I get the error mentioned in this bug report: storybookjs/storybook#18120
It seems like the problem is with the test-runner requiring "jest": "^28.0.0".
Maybe the Verison can be downgraded to 27.5.1?

Steps to reproduce the behavior

Have a working storybook instance with @storybook/test-runner.
Start the storybook.
Try to execute the following command on a new terminal: npm run test-storybook --eject

Expected behavior

Can run tests on storybook.

Screenshots and/or logs

TypeError: Jest: Got error running globalSetup - path_to_project/node_modules/@storybook/test-runner/playwright/global-setup.js, reason: Class extends value undefined is not a constructor or null at getPlaywrightEnv (path_to_project/node_modules/jest-playwright-preset/lib/PlaywrightEnvironment.js:59:5) at Object.<anonymous> (path_to_project/node_modules/jest-playwright-preset/lib/PlaywrightEnvironment.js:245:48) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Object.newLoader (path_to_project/node_modules/pirates/lib/index.js:141:7) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:93:18) at Object.<anonymous> (path_to_project/node_modules/jest-playwright-preset/index.js:1:18)

Environment

• OS: iOS 12.6
• Node.js version: 14.18.1
• NPM version: 6.14.15
• Browser (if applicable): -
• Browser version (if applicable): -
• Device (if applicable): Macbook

Additional context

These are my dependencies:
"dependencies": { "@material/theme": "^14.0.0", "@smui/checkbox": "^6.1.0", "@smui/form-field": "^6.1.0", "@storybook/preset-scss": "^1.0.3", "@storybook/test-runner": "^0.8.0", "svelte-preprocess": "^4.10.6", "@babel/core": "^7.17.8", "@babel/preset-env": "^7.16.11", "@rollup/plugin-node-resolve": "^6.0.0", "@smui/list": "^6.1.0", "@storybook/addon-actions": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/addons": "^6.5.12", "@storybook/svelte": "^6.5.12", "@testing-library/jest-dom": "^5.16.3", "@testing-library/svelte": "^3.1.0", "babel-jest": "^25.2.6", "babel-loader": "^8.2.4", "del-cli": "^3.0.0", "html-webpack-plugin": "^5.5.0", "jest": "27.5.1", "jest-runner": "27.5.1", "jest-environment-node": "27.5.1", "jest-config": "27.5.1", "rollup": "^1.20.0", "rollup-plugin-svelte": "^7.1.0", "rollup-plugin-terser": "^7.0.2", "sass": "^1.50.1", "sass-loader": "^8.0.2", "svelte": "^3.49.0", "svelte-jester": "^1.8.2", "svelte-loader": "^2.13.6", "typescript": "^4.6.4", "webpack": "^4.46.0" },

[yannbf]

Hey @t4ckermann thanks for opening this issue. In v.0.7.0 I made a release that should have made the test-runner use a self-contained Jest, which should not cause this issue anymore. I'll have to investigate.

In the meantime, please use v0.6.4 as a workaround.

[vicrep]

I have the exact same issue on v0.9.0 on projects that use jest v27 (and have it listed as a dev dep). (on any version past 0.6.4)

[vicrep]

So I found a workaround to the issue, as well as a potential explanation.

In my setup, I had create-react-app (react-scripts@5) which internally uses Jest@27, and no package.json entry for jest at all.

The issue:

• @storybook/test-runner depends on jest-playwright-preset, which has a peer dependency on jest-environment-node@28. The test-runner correctly sets jest@28 in its own dependencies and jest-environment-node@28
• however, because jest@27 was already installed by react-scripts, when npm resolves and installs jest-playwright-preset, because it's a peer dependency and jest-environment-node@27 was already implicitly installed through react-scripts->jest@27, npm will put jest-playwright-preset at the top of node_modules and make it depend on jest-environment-node@27. This can be made clear by running ls jest-environment-node on your project -- you should have some nice peerDependency errors printed if you're on npm ≥ 7.

The fix:

To fix this, all it takes is for you to make sure that jest@28 (and therefore jest-environment-node@28) is hoisted to the top level of your node modules. You can do this by running:

npm install -D jest@28

This will hoist and fix the issue. If you want the hoisting to be persisted in the lockfile but not have to keep jest@28 as a dependency in your project, you can optionally run this additional step after:

npm uninstall -D jest

Which will remove it from package.json, but the lockfile will still persist that jest-environment-node@28 needs to be hoisted to the top level for jest-playwright-preset to pick up the correct one. All react-scripts jest dependencies are properly depended upon and will be nested within react-scripts, so no impact on that end.

Hope this helps!

[yannbf]

Hey peeps! I believe this issue has been fixed for quite a while now, so I'll be closing this. Feel free to open if you're still facing it!