[next] fix(NcAppNavigationItem): run cypress tests

[raimund-schluessler]

☑️ Resolves

• Brings back the cypress tests for NcAppNavigationItem.

[ShGKme]

Somehow, using template: '<div style="width: 300px; background: white;"><NcAppNavigationItem name="Home" to="/" :editable="true" /><NcAppNavigationItem name="Foo" to="/foo" :editable="true" /></div>', didn't work anymore, so I created a separate component with a <template> section. If you know why it fails, let me know.

Seems like a runtime version of Vue is used instead of full with compiler. (Or ESM version instead of CJS, because in CJS there is no separation between runtime and full bundle).

[raimund-schluessler]

Somehow, using template: '<div style="width: 300px; background: white;"><NcAppNavigationItem name="Home" to="/" :editable="true" /><NcAppNavigationItem name="Foo" to="/foo" :editable="true" /></div>', didn't work anymore, so I created a separate component with a <template> section. If you know why it fails, let me know.

Seems like a runtime version of Vue is used instead of full with compiler. (Or ESM version instead of CJS, because in CJS there is no separation between runtime and full bundle).

Indeed, that is the issue. Any idea how to fix it? I couldn't find anything in the cypress docs.

[ShGKme]

Any idea how to fix it? I couldn't find anything in the cypress docs.

Weird bad simple solution: in the test import defineComponent from full Vue:

import { defineComponent } from 'vue/dist/vue.esm-bundler.js'

Better solution could be to specify config in Cypress:

// ...
import { mergeConfig } from 'vite'
import viteConfig from './vite.config.mts'

export default defineConfig({

		// ...
                
		devServer: {
			framework: 'vue',
			bundler: 'vite',
			viteConfig: mergeConfig(viteConfig, {
				resolve: {
					alias: {
						vue: 'vue/dist/vue.esm-bundler.js',
					},
				},
			}),
		},
	},
})

But in the current setup with using TS in configs it is not possible to import vite config from cypress config.

And another alternative could be to define env in cypress config and modify vite config based on env.

[raimund-schluessler]

Weird bad simple solution: in the test import defineComponent from full Vue:

import { defineComponent } from 'vue/dist/vue.esm-bundler.js'

I think this is good enough for now. I adjusted the PR accordingly.

[raimund-schluessler]

Ping.