CODEWITHSUNDEEP
webpackcypressvuejs3quasar-framework
khteh
khteh

Reputation: 3896

Quasar2 Vue3 Cypress Webpack Compilation Error

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

Upvotes: 1

Views: 620

Answers (1)

Fody
Fody

Reputation: 31974

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',
  },
});

Upvotes: 1

Related Questions