cli-plugin-e2e-cypress typescript support

[ghost]

What problem does this feature solve?

Since Cypress already ships with official Typescript declarations, it would be nice to support Typescript for the e2e tests via cue-cli.

For the end user experience, I would expect the e2e tests to be .ts files by default when creating a vue-cli project with Typescript support and Cypress e2e testing.

What does the proposed API look like?

On the background, I would expect two things when creating a vue-cli project with Typescript support and Cypress e2e testing:

1. It should create the tests as .ts files and automatically configure Typescript for the e2e folder as described in: https://docs.cypress.io/guides/tooling/typescript-support.html

2. When starting the tests via vue-cli-service test:e2e it should watch and transpile the .ts test files similar to: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__typescript-webpack

[codetalks-new]

look forward for this feature. I'm new to vue(or even the frontend eco),
I choose ts as my main frontend lang, and develop env config sometime hard for me.
a builtin solution would be very helpful for me.

PS: @vue/cli 3.0 is awesome. (with it,I dont' have to waste time on config webpack, it's too difficult)

[huafu]

Actually you just need to put a tsconfig.json file in tests/e2e folder as explained there and it will work out of the box. Only things that changes from what is described in that page are:

• tsconfig.json has to be placed in in tests/e2e folder, which is what is the cypress folder
• baseUrl should be set to ../../node_modules instead of ../node_modules

Of course change your tests/specs/**/*.js files into typescript files...

[Elementmensch]

This did not work for me. The tsconfig.json file causes problems with the typescript typings as explained here. I tried /// <reference types="cypress" /> for my test.ts as recommeded in that issue.

This instead causes type definition conflicts with jest, similar to the problem explained here.

In the end i modified the tsconfig.json in the project root to include "skipLibCheck": true, and added "cypress" to the "types" array.

I'm not sure if this solution is considered a best practice though....

[peabnuts123]

Actually you just need to put a tsconfig.json file in tests/e2e folder as explained there

Adding a tsconfig.json (to tests/e2e) of any kind (even total garbage) seems to have no effect on my project whatsover. Cypress complains about import statements at the top of my first file, and any other typescript syntax if I remove them. It is clearly not being transpiled before being interpreted by Cypress. The documentation cites that you MUST add a compilation step to the file:preprocessor event emitted by Cypress so that you can transpile your code before being served.
Is there something I am missing? Can I call the vue-cli-service build command somehow in the file:preprocessor hook, or reference the already in-memory webpack build created by Vue?

[huafu]

@peabnuts123 I think vue-cli-service does this, because I never had to do anything related to that file:preprocessor event. My tests/e2e folder looks like this:

and here is the content of tsconfig.json:

Update: All my spec are in ts, but the files you can see must remain in js (by "must" I meant that I try to move them to ts and then it doesn't work)

[iskanderbroere]

I ran into issues with the out of the box solution vue-cli provides, a custom webpack config for ts compilation for cypress solved these issues. Check out this repo if you want a working solution.
Things to note:

• babel-loader was added as a dependency to solve: Failed to resolve babel-loader #2599
• @types/jquery was added to solve a compilation error

https://github.com/iskanderbroere/vue-cli-e2e-ts

[DorianGrey]

I've tried the workaround suggested by @iskanderbroere:
https://github.com/DorianGrey/vue-ts-playground/tree/cypress-ts

While the tests are executed fine, the build step before causes a lot of type checking errors complaining about duplicated and errornous type declarations involving @types/jest, @types/jquery, @types/mocha and cypress. Not sure why, but it seems the fork-ts-checker-webpack-plugin that performs those checks ignores the types restriction in the tsconfig.json under these particular circumstances, and I'm wondering why. Edit: Any way of type checking seems to start to ignore the types restriction in the tsconfig.json. Seems this starts to occur after moving at least one test to a ts file.

€dit#2: Using the exclude option in the root level tsconfig.json, it is possible to prevent the build step to ignore that file. However, this causes problems with the linting task from vue-cli-service:

FatalError: 
Invalid source file: [...]/tests/e2e/specs/test.ts. Ensure that the files supplied to lint have a .ts, .tsx, .d.ts, .js or .jsx extension.

Not sure why this file is picked up, since it is not part of the root project anymore. Using the "regular" tslint command with the -p flag works fine (though it doesn't work for .vue files).

[albernhagen]

I'm experiencing the same issue as @peabnuts123 where my tsconfig.json in the e2e folder is ignored. Is there any known workaround for that anyone can point me toward?

[germain-receeve]

Same as @albernhagen @peabnuts123 , any known workaround?

[yoyo930021]

I will add this code in vue.config.js

chainWebpack: config => {
    const options = JSON.parse(process.env.npm_config_argv).original
    if (options.some((el) => el.includes('e2e'))) {
      config
        .plugin('fork-ts-checker')
        .tap(args => {
          args[0].tsconfig = path.resolve(process.env.PWD, './tests/e2e/tsconfig.json')
          return args
        })
      if (options.some((el) => el.includes('headless'))) {
        config.plugins.delete('fork-ts-checker')
      }
    }
  }

tests/e2e/tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "types": [
      "cypress",
      "webpack",
      "webpack-env"
    ],
    "skipLibCheck": true
  },
  "include": [
    "../../src/**/*.ts",
    "../../src/**/*.tsx",
    "../../src/**/*.vue",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "../unit/**/*.ts"
  ]
}

Because:

1. The fork-ts-checker does not support multiple tsconfig.json.
   This config can work well in vscode and vue-cli-service.
2. yarn test:e2e --headless was broken by using fork-ts-checker.

[adambullmer]

I did have some problems using the scaffolded, commented out code in the plugins file, but I did have some luck setting up typescript for both specs and commands with the use of the preprocessor from this repo along with the tests/e2e/tsconfig recommendations mentioned here. You'll need to install @cypress/webpack-preprocessor as this is not already included in the default vue scaffold.

// tests/e2e/plugins/cy-ts-preprocessor.js
const webpack = require("@cypress/webpack-preprocessor");

const webpackOptions = {
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
    ],
  },
};

const options = {
  webpackOptions,
};

module.exports = webpack(options);

// tests/e2e/plugins/index.js
const cypressTypeScriptPreprocessor = require("./cy-ts-preprocessor");
module.exports = (on, config) => {
  // on('file:preprocessor', webpack({
  //  webpackOptions: require('@vue/cli-service/webpack.config'),
  //  watchOptions: {}
  // }))
  on("file:preprocessor", cypressTypeScriptPreprocessor);

  return Object.assign({}, config, {
    fixturesFolder: "tests/e2e/fixtures",
    integrationFolder: "tests/e2e/specs",
    screenshotsFolder: "tests/e2e/screenshots",
    videosFolder: "tests/e2e/videos",
    supportFile: "tests/e2e/support/index.ts", // If you want typescript commands, change the extention
  });
}

// tests/e2e/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../../.", // changed to mimic root tsconfig baseUrl
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}

Hope this is of use to someone else.

Elaborating on the default preprocessor not working: It seems that when using that, you cannot use any custom commands, either from plugins, or created in your project.

[sztepen]

Hi, I upgraded vue-cli to latest version 4.5.11,
ran vue upgrade command
used tsconfig.json as posted by @yoyo930021
npm installed @cypress/webpack-preprocessor
uncomented webpack related stuff in plugings/index.js

so it looks like this:

// if you need a custom webpack configuration you can uncomment the following import
// and then use the `file:preprocessor` event
// as explained in the cypress docs
// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples

/* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */
const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  on('file:preprocessor', webpack({
   webpackOptions: require('@vue/cli-service/webpack.config'),
   watchOptions: {}
  }))

  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js',
  });
};

changed test.js to test.ts
and it seems that typescript works, I can import ts classes etc