[Vue2 + webpack] Vue is not defined in cypress component test.

dante01yoon commented 8 months ago

Current behavior

Greetings.

I get exception errors with Vue2 + webpack.

I have multiple entry points in my webpack.config.js,

And this is how my config.js look like

module.exports = function (env = {}, { outputPath } = {}) {
  return {
    entry: {
      ...entries,
    },
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
        },
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/],
          },
        },
        {
          test: /\.css$/,
          use: ['vue-style-loader', 'css-loader'],
        },
        {
          test: /.less$/,
          use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
        },
        {
          test: /\.s[ac]ss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /\.html$/,
          use: 'raw-loader',
          include: [withModuleDir('assets')],
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: 10 * 1024,
            },
          },
          generator: {
            filename: 'images/[base]',
          },
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          type: 'asset',
          generator: {
            filename: 'files/[base]',
          },
        },
      ],
    },
    plugins: [
      new VueLoaderPlugin(),
      new ProvidePlugin({
        process: 'process/browser',
      }),
    ],
    output:  {
          path: "./custom/output/dist"
          filename: '[name].js',
          chunkFilename: 'module.[name].js',
          clean: true,
    },
  };
};

and this is how my cypress.config.ts looks like

import { defineConfig } from "cypress";
import * as webpackConfig from "./webpack/webpack.app.config";

export default defineConfig({
  retries: {
    runMode: 2,
  },
  env: {
    apiUrl: "http://localhost:3001",
    mobileViewportWidthBreakpoint: 414,
    coverage: false,
    codeCoverage: {
      url: "http://localhost:3001/__coverage__",
      exclude: "cypress/**/*.*",
    },
    defaultPassword: process.env.SEED_DEFAULT_USER_PASSWORD,
  },

  component: {
    specPattern: "src/components/**/*.cy.{js,jsx,ts,tsx}",
    supportFile: "cypress/support/component.ts",
    devServer: {
      framework: "vue",
      bundler: "webpack",
      webpackConfig
    }
  },
});

I don't think commands.js, component.js would cause this problem, however, it looks like below

// commands.js
Cypress.Commands.add('getByTestId', (selector, ...args) => {
  return cy.get(`[data-testid=${selector}]`, ...args)
})

Cypress.Commands.add('getByTestIdLike', (selector, ...args) => {
  return cy.get(`[data-test*=${selector}]`, ...args)
})

// component.js
import "./commands";
import { mount } from 'cypress/vue2'

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', mount);

To resolve this issue, I had to add cdn to load Vue manually in my component-index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Components App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <div 
      data-cy-root
    ></div>
  </body>
</html>

How can I deal with problem without install Vue manually?

BTW, this is how my test code looks like.

import InputButton from './input-button.vue'

describe('<InputButton />', () => {
  it('renders', () => {
    cy.mount(InputButton)
  })
})

Desired behavior

Vue dependencies should be installed automatically without using cdn.

Test code to reproduce

"vue": "^2.7.14",
"@cypress/webpack-dev-server": "^3.7.0",
"cypress": "^13.5.1",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"

Cypress Version

13.5.1

Node version

8.18.2

Operating System

macos ventura 13.5.2

Debug Logs

index-a789108e.js:133765 ReferenceError: The following error originated from your test code, not from Cypress.

  > Vue is not defined

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
    at Object.vue (http://localhost:8080/__cypress/src/main.js:11:18)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:35:42)
    at ./node_modules/.pnpm/cypress@13.5.1/node_modules/cypress/vue2/dist/cypress-vue2.esm-bundler.js (http://localhost:8080/__cypress/src/vendors-node_modules_pnpm_cypress_13_5_1_node_modules_cypress_vue2_dist_cypress-vue2_esm-bundler_js.js:15:61)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:35:42)
    at ./cypress/support/component.ts (http://localhost:8080/__cypress/src/cypress-support-file.js:46:70)
    at Function.__webpack_require__ (http://localhost:8080/__cypress/src/main.js:35:42)
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (http://localhost:8080/__cypress/runner/cypress_runner.js:3486:19)
    at Promise._then (http://localhost:8080/__cypress/runner/cypress_runner.js:1239:17)
    at Promise.then (http://localhost:8080/__cypress/runner/cypress_runner.js:1132:17)
    at runScriptsFromUrls (http://localhost:8080/__cypress/runner/cypress_runner.js:110820:136)
    at Object.runScripts (http://localhost:8080/__cypress/runner/cypress_runner.js:110861:12)
    at $Cypress.onSpecWindow (http://localhost:8080/__cypress/runner/cypress_runner.js:40889:67)
    at init (http://localhost:8080/__cypress/src/vendors-Library_Caches_Cypress_13_5_1_Cypress_app_Contents_Resources_app_node_modules_webpack-316c44.js:3510:13)
    at ../../../../../../Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/loader.js!../../../../../../Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js (http://localhost:8080/__cypress/src/vendors-Library_Caches_Cypress_13_5_1_Cypress_app_Contents_Resources_app_node_modules_webpack-316c44.js:3575:3)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:35:42)
    at render (http://localhost:8080/__cypress/src/vendors-Library_Caches_Cypress_13_5_1_Cypress_app_Contents_Resources_app_node_modules_webpack-316c44.js:3527:5)
    at ../../../../../../Library/Caches/Cypress/13.5.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js (http://localhost:8080/__cypress/src/vendors-Library_Caches_Cypress_13_5_1_Cypress_app_Contents_Resources_app_node_modules_webpack-316c44.js:3529:1)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:35:42)
    at <unknown> (http://localhost:8080/__cypress/src/main.js:307:196)
    at __webpack_require__.O (http://localhost:8080/__cypress/src/main.js:71:23)
    at <unknown> (http://localhost:8080/__cypress/src/main.js:308:53)
    at <unknown> (http://localhost:8080/__cypress/src/main.js:310:12)
logError @ index-a789108e.js:133765
(anonymous) @ index-a789108e.js:146109
emit2 @ index-a789108e.js:139474
(anonymous) @ cypress_runner.js:181945
emit @ cypress_runner.js:146742
emit @ cypress_runner.js:182008
onPrint @ cypress_runner.js:198143
_onPrintClick @ cypress_runner.js:198147
(anonymous) @ cypress_runner.js:197851
executeAction @ cypress_runner.js:180650
n @ cypress_runner.js:180650
ca @ cypress_runner.js:245
ja @ cypress_runner.js:246
ka @ cypress_runner.js:246
wa @ cypress_runner.js:248
Aa @ cypress_runner.js:249
ya @ cypress_runner.js:249
Da @ cypress_runner.js:252
Ad @ cypress_runner.js:315
Gi @ cypress_runner.js:481
Kb @ cypress_runner.js:270
Dd @ cypress_runner.js:317
(anonymous) @ cypress_runner.js:482
exports.unstable_runWithPriority @ cypress_runner.js:537
Ii @ cypress_runner.js:482
Cd @ cypress_runner.js:316



### Other

_No response_

shentao commented 6 months ago

Same issue. After upgrading to Vue 2.7, Cypress component tests stopped working altogether.

cypress-app-bot commented 3 weeks ago

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

cypress-app-bot commented 1 week ago

This issue has been closed due to inactivity.

cypress-io / cypress