search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.8k stars 3.17k forks source link

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

Open OliJeffery opened 4 months ago

OliJeffery commented 4 months ago

Current behavior

defineModel is stable as of Vue 3.4 so we recently refactored a lot of our code to take advantage of it. However, this has broken our component testing. Previously, we were able to pass modelValue as a prop when mounting a component in a component test, like so: 

cy.mount(BasicEditor, {
      props: {
        modelValue: {
          ...rest_of_the_obect
        },
      },
    });

and the test would mount the component with the stub data we gave it.

Since moving to defineModel (specifically for this case const rule = defineModel<Object>({ required: true });), it first gives us the error defineModel is not defined. We can get around this by importing defineModel from Vue in the component, though we shouldn't have to as like defineEmits and defineProps, defineModel is automatically available inside <script setup>.

Adding that import in gets us around the initial error, but then we get an error that rule is undefined.

The component itself isn't broken and works in both production and Cypress e2e testing. I've tried upgrading to the latest version of Cypress (13.90 at the time of writing) but get the same results.

Desired behavior

There should be a way of mounting a component that makes use of defineModel and allows you to pass stub data to it. You should also not have to import defineModel.

Test code to reproduce

Test:

import BasicEditor from "@/components/dashboard/config/rules/BasicEditor.vue";
import { createTestingPinia } from "@pinia/testing";
import { setActivePinia } from "pinia";
import { useNetworkStore } from "@/stores/network";
describe("BasicEditor.vue", () => {
  beforeEach(() => {
    const pinia = createTestingPinia({
      createSpy: () => {
        cy.spy();
      },
    });
    setActivePinia(pinia);
  });

  it('does not render any fmc-type="loading" elements', () => {
    const network = useNetworkStore();
    network.getConfigData = () => {
      return {};
    };
    cy.mount(BasicEditor, {
      props: {
        modelValue: {
          editorConfig: {
            alertIdFields: [],
            conditionsArray: [],
            customFields: [],
            fromTable: null,
            groupFields: [],
            postGroupConditions: [],
            selectedFields: [],
          },
          enabled: false,
          modified: "2024-04-12T13:47:37.465",
          pythonCode: null,
          ruleName: null,
          sqlQuery: null,
          tab: 0,
          active: false,
        },
      },
    });
    cy.get('[fmc-type="loading"]').should("not.exist");
  });
});

Partial component script:

<script setup lang="ts">

const rule = defineModel<Object>({ required: true });

const props = defineProps({
  initialQueryName: String,
  extended: [String, Boolean],
  editAccess: Boolean,
});

console.log(rule.value)

</script>

Cypress Version

13.9.0

Node version

20.11.1

Operating System

macOs 11.6

Debug Logs

at rule.value.editorConfig.fromTable.tag (http://localhost:8080/__cypress/src/src/components/dashboard/config/rules/BasicEditor.vue?t=1715773860619:290:18)
    at callWithErrorHandling (http://localhost:8080/__cypress/src/node_modules/.vite/deps/chunk-AIL5YJOT.js?v=32d27e9b:1858:33)
    at ReactiveEffect.getter [as fn] (http://localhost:8080/__cypress/src/node_modules/.vite/deps/chunk-AIL5YJOT.js?v=32d27e9b:3547:22)
    at ReactiveEffect.run (http://localhost:8080/__cypress/src/node_modules/.vite/deps/chunk-AIL5YJOT.js?v=32d27e9b:396:19)
    at doWatch (http://localhost:8080/__cypress/src/node_modules/.vite/deps/chunk-AIL5YJOT.js?v=32d27e9b:3646:26)
    at watch (http://localhost:8080/__cypress/src/node_modules/.vite/deps/chunk-AIL5YJOT.js?v=32d27e9b:3471:10)
    at setup (http://localhost:8080/__cypress/src/src/components/dashboard/config/rules/BasicEditor.vue?t=1715773860619:289:5)
    at callWithErrorHandling (http://localhost:8080/__cypress/src/node_modules/.vite/deps/chunk-AIL5YJOT.js?v=32d27e9b:1858:19)
    at setupStatefulComponent (http://localhost:8080/__cypress/src/node_modules/.vite/deps/chunk-AIL5YJOT.js?v=32d27e9b:9258:25)
    at setupComponent (http://localhost:8080/__cypress/src/node_modules/.vite/deps/chunk-AIL5YJOT.js?v=32d27e9b:9219:36)
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._passThrough (http://localhost:8080/__cypress/runner/cypress_runner.js:4110:17)
    at Promise.lastly.Promise.finally (http://localhost:8080/__cypress/runner/cypress_runner.js:4119:17)
    at Object.onRunnableRun (http://localhost:8080/__cypress/runner/cypress_runner.js:163586:53)
    at $Cypress.action (http://localhost:8080/__cypress/runner/cypress_runner.js:41042:28)
    at Runnable.run (http://localhost:8080/__cypress/runner/cypress_runner.js:146174:13)
    at next (http://localhost:8080/__cypress/runner/cypress_runner.js:155959:10)
    at <unknown> (http://localhost:8080/__cypress/runner/cypress_runner.js:156003:5)
    at timeslice (http://localhost:8080/__cypress/runner/cypress_runner.js:146514:27)

Other

No response

thevladisss commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

That works, thanks!

OliJeffery commented 4 months ago

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