Skip to content

CI: Fix E2E tests for react-vite sandboxes #30485

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
valentinpalkovic merged 10 commits into from
Feb 6, 2025
Merged

CI: Fix E2E tests for react-vite sandboxes #30485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fc4af7d
CI: Fix E2E test for react-vite/default-ts
valentinpalkovic Feb 6, 2025
0a67f88
Merge branch 'next' into valentin/fix-ci-react-vite
valentinpalkovic Feb 6, 2025
51c02bc
Update addon-docs.spec.ts
valentinpalkovic Feb 6, 2025
057b10d
Support React 19 in @storybook/addon-docs
valentinpalkovic Feb 6, 2025
1cff206
Fix type issues
valentinpalkovic Feb 6, 2025
f005af1
Update react kitchen-sink to 19
valentinpalkovic Feb 6, 2025
346d387
Use link instead of portal for Storybook dependencies in React Kitche…
valentinpalkovic Feb 6, 2025
cdadf6c
Fix addon-docs E2E tests
valentinpalkovic Feb 6, 2025
244abbe
Use yarn file: instead of link: resolution to link internal pacakges
valentinpalkovic Feb 6, 2025
fd05477
Fix CI run
valentinpalkovic Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions code/addons/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,14 +106,14 @@
"@storybook/blocks": "workspace:*",
"@storybook/csf-plugin": "workspace:*",
"@storybook/react-dom-shim": "workspace:*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@mdx-js/mdx": "^3.0.0",
"@rollup/pluginutils": "^5.0.2",
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rehype-external-links": "^3.0.0",
Expand Down
4 changes: 2 additions & 2 deletions code/core/src/components/components/addon-panel/addon-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ReactNode } from 'react';
import type { ReactElement } from 'react';
import React, { useEffect, useRef } from 'react';

const usePrevious = (value: any) => {
Expand All @@ -20,7 +20,7 @@ const useUpdate = (update: boolean, value: any) => {

export interface AddonPanelProps {
active: boolean;
children: ReactNode;
children: ReactElement;
}

export const AddonPanel = ({ active, children }: AddonPanelProps) => {
Expand Down
13 changes: 7 additions & 6 deletions code/e2e-tests/addon-docs.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,18 +200,19 @@ test.describe('addon-docs', () => {
const root = sbPage.previewRoot();

// Arrange - Setup expectations
let expectedReactVersionRange = /^18/;
let expectedReactVersionRange = /^19/;
if (templateName.includes('react-webpack/17') || templateName.includes('react-vite/17')) {
expectedReactVersionRange = /^17/;
} else if (templateName.includes('react16')) {
expectedReactVersionRange = /^16/;
} else if (
templateName.includes('nextjs/default-ts') ||
templateName.includes('nextjs/prerelease') ||
templateName.includes('react-vite/prerelease') ||
templateName.includes('react-webpack/prerelease')
templateName.includes('internal/react18-webpack-babel') ||
templateName.includes('preact-vite/default-js') ||
templateName.includes('preact-vite/default-ts') ||
templateName.includes('react-native-web-vite/expo-ts') ||
templateName.includes('react-webpack/18-ts')
) {
expectedReactVersionRange = /^19/;
expectedReactVersionRange = /^18/;
}

// Arrange - Get the actual versions
Expand Down
4 changes: 2 additions & 2 deletions code/lib/blocks/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@
"tocbot": "^4.20.1"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"storybook": "workspace:^"
},
"peerDependenciesMeta": {
Expand Down
2 changes: 1 addition & 1 deletion code/lib/blocks/src/blocks/Source.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ export const useSourceProps = (
* Story source doc block renders source code if provided, or the source for a story if `storyId` is
* provided, or the source for the current story if nothing is provided.
*/
export const Source: FC<SourceProps> = (props) => {
export const Source = (props: SourceProps) => {
const sourceContext = useContext(SourceContext);
const docsContext = useContext(DocsContext);
const sourceProps = useSourceProps(props, docsContext, sourceContext);
Expand Down
17 changes: 13 additions & 4 deletions code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5790,7 +5790,7 @@ __metadata:
"@storybook/blocks": "workspace:*"
"@storybook/csf-plugin": "workspace:*"
"@storybook/react-dom-shim": "workspace:*"
"@types/react": "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
"@types/react": "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
rehype-external-links: "npm:^3.0.0"
Expand Down Expand Up @@ -6123,8 +6123,8 @@ __metadata:
tocbot: "npm:^4.20.1"
ts-dedent: "npm:^2.0.0"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
storybook: "workspace:^"
peerDependenciesMeta:
react:
Expand Down Expand Up @@ -8606,7 +8606,7 @@ __metadata:
languageName: node
linkType: hard

"@types/react@npm:*, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.0.37":
"@types/react@npm:*, @types/react@npm:^18.0.37":
version: 18.2.55
resolution: "@types/react@npm:18.2.55"
dependencies:
Expand All @@ -8617,6 +8617,15 @@ __metadata:
languageName: node
linkType: hard

"@types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
version: 19.0.8
resolution: "@types/react@npm:19.0.8"
dependencies:
csstype: "npm:^3.0.2"
checksum: 10c0/5fa7236356b1476de03519c66ef65d4fd904826956105619e2ad60cb0b55ae7b251dd5fff02234076225b5e15333d0d936bf9dbe1d461406f8a2ba01c197ddcd
languageName: node
linkType: hard

"@types/resolve@npm:^1.20.2":
version: 1.20.3
resolution: "@types/resolve@npm:1.20.3"
Expand Down
4 changes: 2 additions & 2 deletions test-storybooks/portable-stories-kitchen-sink/nextjs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"build": "next build",
"cypress": "echo 'No cypress setup yet'",
"dev": "next dev",
"jest": "jest",
"jest": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
"lint": "next lint",
"playwright-ct": "echo 'No playwright setup yet'",
"start": "next start",
Expand Down Expand Up @@ -108,4 +108,4 @@
"maintainer_please_read_this": {
"_": "we use file protocol to make this setup close to real life scenarios as well as avoid issues with duplicated React instances. When you recompile the SB packages, you need to rerun install."
}
}
}
134 changes: 67 additions & 67 deletions test-storybooks/portable-stories-kitchen-sink/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"cypress": "cypress run --component",
"cypress-open": "cypress open --component",
"dev": "vite",
"jest": "jest",
"jest": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"playwright-ct": "playwright test -c playwright-ct.config.ts",
"playwright-e2e": "playwright test -c playwright-e2e.config.ts",
Expand All @@ -17,75 +17,75 @@
},
"resolutions": {
"@playwright/test": "1.48.1",
"@storybook/addon-a11y": "portal:../../../code/addons/a11y",
"@storybook/addon-actions": "portal:../../../code/addons/actions",
"@storybook/addon-backgrounds": "portal:../../../code/addons/backgrounds",
"@storybook/addon-controls": "portal:../../../code/addons/controls",
"@storybook/addon-docs": "portal:../../../code/addons/docs",
"@storybook/addon-essentials": "portal:../../../code/addons/essentials",
"@storybook/addon-highlight": "portal:../../../code/addons/highlight",
"@storybook/addon-interactions": "portal:../../../code/addons/interactions",
"@storybook/addon-jest": "portal:../../../code/addons/jest",
"@storybook/addon-links": "portal:../../../code/addons/links",
"@storybook/addon-measure": "portal:../../../code/addons/measure",
"@storybook/addon-mgx-gfm": "portal:../../../code/addons/mgx-gfm",
"@storybook/addon-outline": "portal:../../../code/addons/outline",
"@storybook/addon-storysource": "portal:../../../code/addons/storysource",
"@storybook/addon-themes": "portal:../../../code/addons/themes",
"@storybook/addon-toolbars": "portal:../../../code/addons/toolbars",
"@storybook/addon-viewport": "portal:../../../code/addons/viewport",
"@storybook/angular": "portal:../../../code/frameworks/angular",
"@storybook/blocks": "portal:../../../code/lib/blocks",
"@storybook/builder-vite": "portal:../../../code/builders/builder-vite",
"@storybook/builder-webpack5": "portal:../../../code/builders/builder-webpack5",
"@storybook/codemod": "portal:../../../code/lib/codemod",
"@storybook/addon-a11y": "file:../../../code/addons/a11y",
"@storybook/addon-actions": "file:../../../code/addons/actions",
"@storybook/addon-backgrounds": "file:../../../code/addons/backgrounds",
"@storybook/addon-controls": "file:../../../code/addons/controls",
"@storybook/addon-docs": "file:../../../code/addons/docs",
"@storybook/addon-essentials": "file:../../../code/addons/essentials",
"@storybook/addon-highlight": "file:../../../code/addons/highlight",
"@storybook/addon-interactions": "file:../../../code/addons/interactions",
"@storybook/addon-jest": "file:../../../code/addons/jest",
"@storybook/addon-links": "file:../../../code/addons/links",
"@storybook/addon-measure": "file:../../../code/addons/measure",
"@storybook/addon-mgx-gfm": "file:../../../code/addons/mgx-gfm",
"@storybook/addon-outline": "file:../../../code/addons/outline",
"@storybook/addon-storysource": "file:../../../code/addons/storysource",
"@storybook/addon-themes": "file:../../../code/addons/themes",
"@storybook/addon-toolbars": "file:../../../code/addons/toolbars",
"@storybook/addon-viewport": "file:../../../code/addons/viewport",
"@storybook/angular": "file:../../../code/frameworks/angular",
"@storybook/blocks": "file:../../../code/lib/blocks",
"@storybook/builder-vite": "file:../../../code/builders/builder-vite",
"@storybook/builder-webpack5": "file:../../../code/builders/builder-webpack5",
"@storybook/codemod": "file:../../../code/lib/codemod",
"@storybook/components": "file:../../../code/deprecated/components",
"@storybook/core": "portal:../../../code/core",
"@storybook/core-webpack": "portal:../../../code/lib/core-webpack",
"@storybook/csf-plugin": "portal:../../../code/lib/csf-plugin",
"@storybook/ember": "portal:../../../code/frameworks/ember",
"@storybook/core": "file:../../../code/core",
"@storybook/core-webpack": "file:../../../code/lib/core-webpack",
"@storybook/csf-plugin": "file:../../../code/lib/csf-plugin",
"@storybook/ember": "file:../../../code/frameworks/ember",
"@storybook/experimental-addon-test": "file:../../../code/addons/test",
"@storybook/html": "portal:../../../code/renderers/html",
"@storybook/html-webpack5": "portal:../../../code/frameworks/html-webpack5",
"@storybook/instrumenter": "portal:../../../code/lib/instrumenter",
"@storybook/html": "file:../../../code/renderers/html",
"@storybook/html-webpack5": "file:../../../code/frameworks/html-webpack5",
"@storybook/instrumenter": "file:../../../code/lib/instrumenter",
"@storybook/manager-api": "file:../../../code/deprecated/manager-api",
"@storybook/nextjs": "portal:../../../code/frameworks/nextjs",
"@storybook/preact": "portal:../../../code/renderers/preact",
"@storybook/preact-vite": "portal:../../../code/frameworks/preact-vite",
"@storybook/preact-webpack5": "portal:../../../code/frameworks/preact-webpack5",
"@storybook/preset-create-react-app": "portal:../../../code/presets/create-react-app",
"@storybook/preset-html-webpack": "portal:../../../code/presets/html-webpack",
"@storybook/preset-preact-webpack": "portal:../../../code/presets/preact-webpack",
"@storybook/preset-react-webpack": "portal:../../../code/presets/react-webpack",
"@storybook/preset-server-webpack": "portal:../../../code/presets/server-webpack",
"@storybook/preset-svelte-webpack": "portal:../../../code/presets/svelte-webpack",
"@storybook/preset-vue3-webpack": "portal:../../../code/presets/vue3-webpack",
"@storybook/nextjs": "file:../../../code/frameworks/nextjs",
"@storybook/preact": "file:../../../code/renderers/preact",
"@storybook/preact-vite": "file:../../../code/frameworks/preact-vite",
"@storybook/preact-webpack5": "file:../../../code/frameworks/preact-webpack5",
"@storybook/preset-create-react-app": "file:../../../code/presets/create-react-app",
"@storybook/preset-html-webpack": "file:../../../code/presets/html-webpack",
"@storybook/preset-preact-webpack": "file:../../../code/presets/preact-webpack",
"@storybook/preset-react-webpack": "file:../../../code/presets/react-webpack",
"@storybook/preset-server-webpack": "file:../../../code/presets/server-webpack",
"@storybook/preset-svelte-webpack": "file:../../../code/presets/svelte-webpack",
"@storybook/preset-vue3-webpack": "file:../../../code/presets/vue3-webpack",
"@storybook/preview-api": "file:../../../code/deprecated/preview-api",
"@storybook/react": "portal:../../../code/renderers/react",
"@storybook/react-dom-shim": "portal:../../../code/lib/react-dom-shim",
"@storybook/react-vite": "portal:../../../code/frameworks/react-vite",
"@storybook/react-webpack5": "portal:../../../code/frameworks/react-webpack5",
"@storybook/server": "portal:../../../code/renderers/server",
"@storybook/server-webpack5": "portal:../../../code/frameworks/server-webpack5",
"@storybook/source-loader": "portal:../../../code/lib/source-loader",
"@storybook/svelte": "portal:../../../code/renderers/svelte",
"@storybook/svelte-vite": "portal:../../../code/frameworks/svelte-vite",
"@storybook/svelte-webpack5": "portal:../../../code/frameworks/svelte-webpack5",
"@storybook/sveltekit": "portal:../../../code/frameworks/sveltekit",
"@storybook/test": "portal:../../../code/lib/test",
"@storybook/react": "file:../../../code/renderers/react",
"@storybook/react-dom-shim": "file:../../../code/lib/react-dom-shim",
"@storybook/react-vite": "file:../../../code/frameworks/react-vite",
"@storybook/react-webpack5": "file:../../../code/frameworks/react-webpack5",
"@storybook/server": "file:../../../code/renderers/server",
"@storybook/server-webpack5": "file:../../../code/frameworks/server-webpack5",
"@storybook/source-loader": "file:../../../code/lib/source-loader",
"@storybook/svelte": "file:../../../code/renderers/svelte",
"@storybook/svelte-vite": "file:../../../code/frameworks/svelte-vite",
"@storybook/svelte-webpack5": "file:../../../code/frameworks/svelte-webpack5",
"@storybook/sveltekit": "file:../../../code/frameworks/sveltekit",
"@storybook/test": "file:../../../code/lib/test",
"@storybook/theming": "file:../../../code/deprecated/theming",
"@storybook/vue3": "portal:../../../code/renderers/vue3",
"@storybook/vue3-vite": "portal:../../../code/frameworks/vue3-vite",
"@storybook/vue3-webpack5": "portal:../../../code/frameworks/vue3-webpack5",
"@storybook/web-components": "portal:../../../code/renderers/web-components",
"@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite",
"@storybook/web-components-webpack5": "portal:../../../code/frameworks/web-components-webpack5",
"@storybook/vue3": "file:../../../code/renderers/vue3",
"@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite",
"@storybook/vue3-webpack5": "file:../../../code/frameworks/vue3-webpack5",
"@storybook/web-components": "file:../../../code/renderers/web-components",
"@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite",
"@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5",
"playwright": "1.48.1",
"storybook": "portal:../../../code/lib/cli"
"storybook": "file:../../../code/lib/cli"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@playwright/experimental-ct-react": "1.48.1",
Expand All @@ -101,11 +101,11 @@
"@storybook/test": "^8.0.0",
"@swc/core": "^1.4.2",
"@swc/jest": "^0.2.36",
"@testing-library/jest-dom": "6.5.0",
"@testing-library/react": "^14.2.1",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "^16.2.0",
"@types/identity-obj-proxy": "^3",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react": "^4.2.1",
Expand All @@ -121,7 +121,7 @@
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"storybook": "^8.0.0",
"typescript": "^5.2.2",
"typescript": "^5.7.3",
"vite": "^5.1.1",
"vitest": "^3.0.2"
}
Expand Down
Loading