Add vue application alias path resolve in Cypress

[lossendae]

What problem does this feature solve?

I would like to import some javascript from my app in Cypress.

For now i have to use relative paths to do so:

import { CONST_1, CONST_2 } from '../../../../../whatever/path/to/file.js'

I would like to use the vue app alias like so :

import { CONST_1, CONST_2 } from '@/whatever/path/to/file.js'

Is there any way to achieve this ?

What does the proposed API look like?

We can already use alias path in Jest, it would be nice to be able to do the same with Cypress even if they don't use the same preprocessor (Browserify for Cypress i believe ?).

import { CONST_1, CONST_2 } from '@/whatever/path/to/file.js'

[dobromir-hristov]

This requires a change in Cypress's default preprocessor.
https://github.com/cypress-io/cypress-webpack-preprocessor

I am not exactly sure if we can tap into the Vue's webpack config from inside Cypress'es plugins file. You could just hardcode the @ in that config's aliases as it most likely the main feature you are after. Though that may cause problems with extra babel plugins that you have on your project, that Cypress doesnt. Cypress does not load the project's .babelrc so you will have to provide it to that Webpack's babel config directly.

[LinusBorg]

I don't find anything in the cypress docs that would allow this.

If someone can come up with something, we would be happy to accept a PR

[dobromir-hristov]

cypress-io/cypress#343, they ask about babel, but the end result is they allow for a preprocessor reconfigure or a total swap.

https://github.com/cypress-io/cypress-browserify-preprocessor#modifying-default-options
https://www.npmjs.com/package/aliasify

If the @ -> src is mainly what we are after, it could probably be done manually. Though that could cause transpilation issues with the version of node Cypress ships with if he uses something newer. The rabbit hole gets deeper.

[kenberkeley]

https://github.com/Rush/link-module-alias should help

{ // package.json
  ...
  "scripts": {
    "postinstall": "link-module-alias"
  },
  "_moduleAliases": {
    "~": "./"
  },
  ...
}