Vue - Typescript Unit and E2E Testing including Code Coverage using Cypress setup example
This project started using @vue/cli 4.4.5
Babel Typscript CSS Pre-processors Linter / Formatter E2E Testing > Cypress
Install the following devDepedencies:
@cypress/code-coverage
@cypress/webpack-preprocessor
find-webpack
babel-loader
babel-plugin-istanbul
@vue/test-utils
- Edit plugins located at
tests/e2e/plugins/index.js
a. Get webpackOptionsb. Setupconst webpackPreprocessor = require("@cypress/webpack-preprocessor"); const webpackOptions = require("find-webpack").getWebpackOptions();
file:preprocessor
on( "file:preprocessor", webpackPreprocessor({ webpackOptions }) );
- Setup Code Coverage task in plugins file
require("@cypress/code-coverage/task")(on, config);
- Edit Code Coverage task to Cypress support located at
tests/e2e/support/index.js
import "@cypress/code-coverage/support";
- Add
istanbul
to Babel pluginsplugins: ["istanbul"]
- Setup
nyc
target extension{ "extension": [ ".js", ".vue" ] }
- Create your test specs
- Run test
yarn test:e2e