Component testing doesn't work with Vue 3.4's defineModel

[OliJeffery]

Component testing doesn't work with Vue 3.4's defineModel

[thevladisss]

What bundler tool are you using? From my experience I can say that you might want to configure your bundler to opt-in this feature.

Would be also nice to see your cypress dev server configuration

[OliJeffery]

What bundler tool are you using? From my experience I can say that you might want to configure your bundler to opt-in this feature.

I'm using Vite 5 (which is needed to use Vue 3.4). Also using yarn rather than npm.

Would be also nice to see your cypress dev server configuration

import { defineConfig } from "cypress";

export default defineConfig({
  env: {
    redacted
  },
  viewportHeight: 1280,
  viewportWidth: 1920,
  chromeWebSecurity: false,
  defaultCommandTimeout: 30000, // For timing out on cy.get etc.
  responseTimeout: 180000, // For loading a page.
  video: false,
  videoCompression: false,
  scrollBehavior: false,
  screenshotOnRunFailure: true,
  watchForFileChanges: false,
  fixturesFolder: "tests/cypress/support/modules/fixtures",
  e2e: {
    setupNodeEvents(on, config) {
      on("before:browser:launch", (browser = {}, launchOptions) => {
        if (browser.name === "edge" && browser.isHeadless) {
          const width = 2000;
          const height = 2000;
          console.info(
            `Setting the browser window size to ${width} x ${height} because of Edge bug.`
          );
          launchOptions.args.push(`--window-size=${width},${height}`);
        }
        return launchOptions;
      });
      return Object.assign({}, config, {
        screenshotsFolder: "tests/cypress/screenshots/e2e",
        videosFolder: "tests/cypress/videos/e2e",
        supportFile: "tests/cypress/support/index.js",
      });
    },
    baseUrl: "redacted",
    specPattern: [
      "tests/cypress/e2e/users/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/playgrounds/datasourcesPlayground.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/playgrounds/joinsPlayground.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/playgrounds/rulesPlayground.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/data/accountLedger/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/data/alerts/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/data/contracts/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/data/products/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/datasources/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/joins/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/rules/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/general/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/reporting/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/aws/*.cy.{js,jsx,ts,tsx}",
    ],
    supportFile: "tests/cypress/support/index.js",
    experimentalRunAllSpecs: true,
  },

  component: {
    indexHtmlFile: "tests/cypress/support/component-index.html",
    supportFile: "tests/cypress/support/component.js",
    devServer: {
      framework: "vue",
      bundler: "vite",
    },
    specPattern: "tests/cypress/component/**/*.cy.{js,jsx,ts,tsx}",
    screenshotsFolder: "tests/cypress/screenshots/component",
    videosFolder: "tests/cypress/videos/component",
  },
});

[thevladisss]

What bundler tool are you using? From my experience I can say that you might want to configure your bundler to opt-in this feature.

I'm using Vite 5 (which is needed to use Vue 3.4). Also using yarn rather than npm.

Would be also nice to see your cypress dev server configuration

import { defineConfig } from "cypress";

export default defineConfig({
  env: {
    redacted
  },
  viewportHeight: 1280,
  viewportWidth: 1920,
  chromeWebSecurity: false,
  defaultCommandTimeout: 30000, // For timing out on cy.get etc.
  responseTimeout: 180000, // For loading a page.
  video: false,
  videoCompression: false,
  scrollBehavior: false,
  screenshotOnRunFailure: true,
  watchForFileChanges: false,
  fixturesFolder: "tests/cypress/support/modules/fixtures",
  e2e: {
    setupNodeEvents(on, config) {
      on("before:browser:launch", (browser = {}, launchOptions) => {
        if (browser.name === "edge" && browser.isHeadless) {
          const width = 2000;
          const height = 2000;
          console.info(
            `Setting the browser window size to ${width} x ${height} because of Edge bug.`
          );
          launchOptions.args.push(`--window-size=${width},${height}`);
        }
        return launchOptions;
      });
      return Object.assign({}, config, {
        screenshotsFolder: "tests/cypress/screenshots/e2e",
        videosFolder: "tests/cypress/videos/e2e",
        supportFile: "tests/cypress/support/index.js",
      });
    },
    baseUrl: "redacted",
    specPattern: [
      "tests/cypress/e2e/users/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/playgrounds/datasourcesPlayground.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/playgrounds/joinsPlayground.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/playgrounds/rulesPlayground.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/data/accountLedger/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/data/alerts/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/data/contracts/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/data/products/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/datasources/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/joins/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/config/rules/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/general/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/reporting/*.cy.{js,jsx,ts,tsx}",
      "tests/cypress/e2e/aws/*.cy.{js,jsx,ts,tsx}",
    ],
    supportFile: "tests/cypress/support/index.js",
    experimentalRunAllSpecs: true,
  },

  component: {
    indexHtmlFile: "tests/cypress/support/component-index.html",
    supportFile: "tests/cypress/support/component.js",
    devServer: {
      framework: "vue",
      bundler: "vite",
    },
    specPattern: "tests/cypress/component/**/*.cy.{js,jsx,ts,tsx}",
    screenshotsFolder: "tests/cypress/screenshots/component",
    videosFolder: "tests/cypress/videos/component",
  },
});

It appears like you your config is inferred from the one you use for your app bundling.
So your configuration should be basically there.

export default defineConfig({
  plugins: [
    vue({
      script: {
        defineModel: true
      }
    })
  ]
});

Try to follow the code snippet above. This might come in handy as well:
https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue

[OliJeffery]

That works, thanks!

[OliJeffery]

(Though should probably be available by default in a future release as it's a stable feature in Vue now)