Merge pull request #19257 from storybookjs/tech/vue-e2e-fix

change the vue e2e test to use webpack5, since we stopped supporting webpack4 in 7.0
storybookjs · Sep 27, 2022 · e8dd2df · e8dd2df
2 parents d9bc2a8 + a424ab7
commit e8dd2df
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/code/cypress/generated/addon-interactions.spec.ts b/code/cypress/generated/addon-interactions.spec.ts
@@ -50,8 +50,4 @@ describe('addon-interactions', () => {
   onlyOn('vue3', () => {
     it('should have interactions', test);
   });
-
-  onlyOn('vue', () => {
-    it('should have interactions', test);
-  });
 });
diff --git a/code/cypress/generated/basic.spec.ts b/code/cypress/generated/basic.spec.ts
@@ -1,3 +1,5 @@
+import { skipOn } from '@cypress/skip-test';
+
 describe('Basic CLI', () => {
   before(() => {
     cy.visitStorybook();
@@ -58,19 +60,21 @@ describe('Basic CLI', () => {
   });
 
   describe('Page story', () => {
-    it('should load and display logged out', () => {
-      cy.navigateToStory('example-page', 'logged-out');
-      cy.getStoryElement().should('contain.text', 'Acme');
-      cy.getStoryElement().find('button').first().should('contain.text', 'Log in');
-      cy.getStoryElement().find('button').last().should('contain.text', 'Sign up');
-      cy.getStoryElement().should('contain.text', 'Pages in Storybook');
-    });
+    skipOn('vue', () => {
+      it('should load and display logged out', () => {
+        cy.navigateToStory('example-page', 'logged-out');
+        cy.getStoryElement().should('contain.text', 'Acme');
+        cy.getStoryElement().find('button').first().should('contain.text', 'Log in');
+        cy.getStoryElement().find('button').last().should('contain.text', 'Sign up');
+        cy.getStoryElement().should('contain.text', 'Pages in Storybook');
+      });
 
-    it('should load and display logged in', () => {
-      cy.navigateToStory('example-page', 'logged-in');
-      cy.getStoryElement().find('header').should('contain.text', 'Acme');
-      cy.getStoryElement().find('button').should('contain.text', 'Log out');
-      cy.getStoryElement().should('contain.text', 'Pages in Storybook');
+      it('should load and display logged in', () => {
+        cy.navigateToStory('example-page', 'logged-in');
+        cy.getStoryElement().find('header').should('contain.text', 'Acme');
+        cy.getStoryElement().find('button').should('contain.text', 'Log out');
+        cy.getStoryElement().should('contain.text', 'Pages in Storybook');
+      });
     });
   });
 });
diff --git a/code/lib/cli/src/repro-generators/configs.ts b/code/lib/cli/src/repro-generators/configs.ts
@@ -194,11 +194,10 @@ export const web_components_lit2: Parameters = {
 export const vue: Parameters = {
   renderer: 'vue',
   name: 'vue',
-  // Be careful here, the latest versions of vue cli are bootstrapping a vue 3  project
-  version: '4',
+  version: 'latest',
   generator: [
-    // Force npm otherwise we have a mess between Yarn 1 and Yarn 2
-    `npx -p @vue/cli@{{version}} vue create {{appName}} --default --packageManager=npm --no-git --force`,
+    // vue2 with webpack5
+    `npx -p @vue/cli vue create {{appName}} --default --packageManager=yarn --force --merge --preset="Default (Vue 2)"`,
   ].join(' && '),
 };
 

diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts
@@ -3,15 +3,21 @@ import type { StorybookConfig } from './types';
 
 export * from './types';
 
-export const babelDefault: StorybookConfig['babelDefault'] = (config) => {
+export const babel: StorybookConfig['babelDefault'] = (config) => {
   return {
     ...config,
     plugins: [
       [
         require.resolve('@babel/plugin-transform-react-jsx'),
         { importSource: 'preact', runtime: 'automatic' },
       ],
-      ...(config.plugins || []),
+      ...(config.plugins || []).filter((p) => {
+        const name = Array.isArray(p) ? p[0] : p;
+        if (typeof name === 'string') {
+          return !name.includes('babel-plugin-transform-react-jsx');
+        }
+        return true;
+      }),
     ],
   };
 };