Migrate storybook to v8 and its dependencies #207
Conversation
| @@ -1,11 +1,11 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
It was not required before but it breaks now if you don't import react
| @@ -11,13 +11,11 @@ | |||
| }, | |||
| ".": { | |||
| "import": "./lib/mjs/index.js", | |||
| "require": "./lib/cjs/index.js", | |||
| "types": "./lib/types/index.d.ts" | |||
| "require": "./lib/cjs/index.js" | |||
There was a problem hiding this comment.
The types import was ignored here. When I updated esbuild it threw the warning.
We already export all the types globally here
|
Interaction tests are only failing when ran in the CLI because of
|
| }; | ||
|
|
||
| // @ts-ignore | ||
| // eslint-disable-next-line | ||
| window.navigator.__defineGetter__('webdriver', () => false); |
There was a problem hiding this comment.
Override webdriver so our tracker module doesn't treat it as a bot and block tracking events
| @@ -26,6 +26,11 @@ export default { | |||
| }, | |||
| }; | |||
|
|
|||
| const explicitActionsSpies = { | |||
There was a problem hiding this comment.
We have to set explicit spies for the actions
| @@ -21,6 +21,8 @@ jobs: | |||
| node-version: '18.13.0' | |||
| - name: Install dependencies | |||
| run: npm ci | |||
| - name: Install Playwright Browsers | |||
| run: npx playwright install --with-deps # Downloads browser binaries + OS dependencies | |||
There was a problem hiding this comment.
Playwright is required to download browser binaries for the interaction tests
| @@ -1,4 +1,5 @@ | |||
| const failOnConsole = require('jest-fail-on-console') | |||
| require('whatwg-fetch') | |||
There was a problem hiding this comment.
After updating jest I got an error that fetch is not defined so I added a fetch polyfill
| "husky": "^8.0.1", | ||
| "jest": "^29.7.0", | ||
| "jest-environment-jsdom": "^29.7.0", | ||
| "jest-fail-on-console": "^3.3.0", | ||
| "license-checker": "^25.0.1", | ||
| "playwright": "^1.52.0", |
There was a problem hiding this comment.
Needed for the interaction tests
|
Are you also getting this while doing 
Also getting this when running 
|
Thank you for raising this @esezen Yes, I do get it as well. This is happening because of the current Component Story Format (CSF). They need to be migrated to the updated CSF but this is having no real effect right now other than the warnings This is an example of the changes needed to migrate to the new CSF format. Currently, we only have the |
Upgrading Storybook from version 7.6.20 to version 8.6.12..How?
npx storybook@latest upgradeWhat changed?
1. 🆙 Updated Node and NPM versions to LTS
2. ➕ Added
@storybook/manager-apiandstorybook/themingStorybook packages used in your project, but they are missing from your project dependencies:3. 🔁 Replaced
@storybook/jestand@storybook/testing-librarywith@storybook/testinstead4. ➖ Removed
argTypesRegexsince it's deprecated5. Webpack compiler setup
@storybook/addon-webpack5-compiler-babel6. 🆙 Upgraded storybook dependencies
@storybook/<something>7. ➕ Added Visual Tests addon (It was recommended by the migration prompts)
@chromatic-com/storybook8. 🔁 Removed
docs.autodocssetting in.storybook/main.jssince it is deprecated.storybook/preview.jsxinstead