https://github.com/janumedia/vue-typescript-cypress-example

Vue - Typescript Unit and E2E testing including Code Coverage using Cypress setup example
https://github.com/janumedia/vue-typescript-cypress-example

boilerplate code-coverage cypress-io e2e-testing typescript unit-testing vue

Last synced: about 3 hours ago
JSON representation

Vue - Typescript Unit and E2E testing including Code Coverage using Cypress setup example

• Host: GitHub
• URL: https://github.com/janumedia/vue-typescript-cypress-example
• Owner: janumedia
• Created: 2020-06-26T06:22:28.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T04:05:35.000Z (almost 2 years ago)
• Last Synced: 2024-05-30T16:29:08.916Z (5 months ago)
• Topics: boilerplate, code-coverage, cypress-io, e2e-testing, typescript, unit-testing, vue
• Language: JavaScript
• Homepage:
• Size: 1.47 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-typescript-cypress-example

Vue - Typescript Unit and E2E Testing including Code Coverage using Cypress setup example

## Vue-Cli

This project started using `@vue/cli 4.4.5`

### Manual selection

Babel

Typscript

CSS Pre-processors

Linter / Formatter

E2E Testing > Cypress

## Depedencies

Install the following devDepedencies:

```

@cypress/code-coverage

@cypress/webpack-preprocessor

find-webpack

babel-loader

babel-plugin-istanbul

@vue/test-utils

```

## Cypress Setup

1. Edit plugins located at `tests/e2e/plugins/index.js`

    a. Get webpackOptions

    ```

    const webpackPreprocessor = require("@cypress/webpack-preprocessor");

    const webpackOptions = require("find-webpack").getWebpackOptions();

    ```

    b. Setup `file:preprocessor`

    ```

    on(

        "file:preprocessor",

        webpackPreprocessor({ webpackOptions })

    );

    ```

2. Setup Code Coverage task in plugins file

    ```

    require("@cypress/code-coverage/task")(on, config);

    ```

3. Edit Code Coverage task to Cypress support located at `tests/e2e/support/index.js`

    ```

    import "@cypress/code-coverage/support";

    ```

4. Add `istanbul` to Babel plugins

    ```

    plugins: ["istanbul"]

    ```

5. Setup `nyc` target extension

    ```

    {

        "extension": [ ".js", ".vue" ]

    }

    ```

6. Create your test specs

7. Run test

    ```

    yarn test:e2e

    ```