Quasar2 Vue3 Cypress Webpack Compilation Error-CodePudding

test/cypress/integration/pages/MyPage.cy.js:

import MyPage from '../../../../src/pages/MyPage.vue';

Running E2E test bumps into the following error:

Webpack Compilation Error
./src/pages/MyPage.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <q-page padding>
|     <q-input
 @ ./test/cypress/integration/pages/MyPage.cy.js 9:40-86

Only happens to E2E tests but NOT component tests. What do I miss? Thanks. https://github.com/khteh/quasar

CodePudding user response：

You don't have MyPage.cy.js in the repo, but all of your tests under test/cypress/integration/pages are component tests (because they use mount()), so you can't run those with Cypress e2e.

The spec test/cypress/integration/home.cy.js will run, it is an e2e test.

Because you have cy.visit('/') in this test, you will need a baseUrl in config.

First start the app with yarn quasar dev, it will tell you what port is being used (probably 8080). Make that your baseUrl in config.

Final thing missing from config is supportFile.

It's needed because you have <project root>/test/cypress/support/index.js not conventional <project root>/cypress/support/e2e.js.

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  component: {
    ...
  },
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    specPattern: 'test/cypress/integration/**/*.cy.{js,jsx,ts,tsx}',
    supportFile: 'test/cypress/support/index.js',
    baseUrl: 'http://localhost:8080',
  },
});