Quasar Cypress Component Testing

Error Message

Getting started with component testing in Quasar fails with:

The following error originated from your test code, not from Cypress.

> Failed to fetch dynamically imported module: http://localhost:9000/__cypress/src/test/cypress/support/component.ts

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.

Network Traffic

Having a look into the network tab in the browser dev tools reveals 2 failed network requests.

Both of these imports are triggered by the src/test/cypress/support/component.ts file cypress is mentioning. So, our config file is throwing exceptions when cypress tries to load it.

Having a look onto these URLs:

# 403 Restricted

The request url "/Users/devidw/Desktop/GitHub/gearchy/node_modules/.pnpm/quasar@2.10.1/node_modules/quasar/src/css/index.sass" is outside of Vite serving allow list.  
  
- /Users/devidw/Desktop/GitHub/gearchy/app  
- /Users/devidw/Desktop/GitHub/gearchy/node_modules/.pnpm/vite@2.9.15_sass@1.32.12/node_modules  
- /Users/devidw/Library/Caches/Cypress/10.11.0/Cypress.app/Contents/Resources/app  
  
Refer to docs https://vitejs.dev/config/#server-fs-allow for configurations and more details.

Vite rejects loading from the given directory, because it is only configured to look in the listed 3 directories.

Since working in a PNPM directories workspace, Vite should also be allowed to pick up the parent directory right above our project root, since the dependency paths are stored under the node_modules folder there.

How to adjust vite config

We can allow the parent dir via vite.config.ts like so:

 server: {
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['..']
    }
  }

Docs

Inject vite config via quasar config

To be able to get this working in Quasar we have to inject it via quasar.config.js:

extendViteConf(viteConf) {
	// console.log('viteConf', viteConf)
	if (viteConf.hasOwnProperty('server')) {
		viteConf.server.fs.allow = ['..']
	}
	return viteConf
},

Docs

When building there is no server node in the config, so we assert it is available.

Using Sass not SCSS

When still having a 404 of:

http://localhost:9000/__cypress/src/src/css/app.scss

And using app.sass instead of app.scss in Quasar we also have to fix this in our component.ts, since the app extension automatically writes the SCSS one:

// Change this if you have a different entrypoint for the main scss.
import 'src/css/app.scss'

import 'src/css/app.sass'

In order to fix the 404 request.

Restart

To apply the changes reopen Cypress/Chrome via:

pnpm cypress open --component

Component testing should work now.

Join the garden

Finally enjoy quality-first content.

'cause low-quality sucks