Setup Vite + Vue with Cypress Code Coverage

setup-vite-vue/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.nyc_output
+coverage
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

setup-vite-vue/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}

setup-vite-vue/README.md

@@ -0,0 +1,46 @@
+# Component Testing Example: Vite + Vue
+
+This is an example **Vite + Vue** project with Cypress component testing.
+
+- `yarn` to install the dependencies
+- `npx cypress open-ct` to run interactively
+- `npx cypress run-ct` to run all tests headlessly
+
+The following was done to create this example:
+
+1. Initialize a baseline Vue project in the [setup-vite-vue](.) subdirectory
+   1. `yarn create vite setup-vite-vue --template vue`
+   2. Commit [`0b3cc45`](https://github.com/cypress-io/cypress-component-testing-examples/commit/0b3cc45b7331925eead9626c5a43e907149ad3e5)
+2. Install project dependencies
+   1. `cd setup-vite-vue`
+   2. `yarn`
+   3. Commit [`5c291db`](https://github.com/cypress-io/cypress-component-testing-examples/commit/5c291db89228afc36965bf3a716aa8f857431195)
+3. Update app to move global styles into main.css file
+   1. Move global app styles from [src/App.vue](src/App.vue) into [src/main.css](src/main.css)
+   2. Update [src/main.js](src/main.js)
+   3. Commit [`c03b0c7`](https://github.com/cypress-io/cypress-component-testing-examples/commit/c03b0c7ad9edac1343e9bcf8c41c6495f44dfad3)
+4. Add Cypress component testing support with sample tests
+   1. `yarn add -D https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/circle-10.0-release-e7718f7489276cac2e8ad71bc57a627eb0135fbd/cypress.tgz @cypress/vue@3 @cypress/vite-dev-server`
+   2. Add [cypress.config.js](cypress.config.js)
+   3. Add [src/App.cy.js](src/App.cy.js), [src/components/HelloWorld.cy.js](src/components/HelloWorld.cy.js)
+   5. `npx cypress open` (Notice that the fonts don't inherit global app styles)
+   6. Edit [cypress/support/component.js](cypress/support/component.js) to import global app styles, the Cypress test preview should update automatically
+   7. Commit [`d7a9799`](https://github.com/cypress-io/cypress-component-testing-examples/commit/d7a9799bfe066b824c52c8fd517e685b46fa783d)
+5. Add Cypress Code Coverage
+   1. `yarn add -D @cypress/code-coverage@3.10.0-dev.1 vite-plugin-istanbul`
+   2. Edit [.gitignore](.gitignore) to ignore .nyc_output and coverage directories
+   3. Edit [cypress.config.js](cypress.config.js) to enable `coverage` and configure the Cypress code coverage task with Istanbul
+   4. Edit [cypress/support/component.js](cypress/support/component.js) to import Cypress code coverage support
+   5. Commit [`eabd077`](https://github.com/cypress-io/cypress-component-testing-examples/commit/eabd077b09c94f1bf76b3bf565a836b3ead8812b)
+
+_This example was generated by [setup-vite-vue.sh](https://github.com/cypress-io/cypress-component-testing-examples/blob/main/scripts/setup-vite-vue.sh) on 2022-02-15. The original README follows._
+
+---
+
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

setup-vite-vue/cypress.config.js

@@ -0,0 +1,19 @@
+const { defineConfig } = require('cypress')
+const { devServer } = require('@cypress/vite-dev-server')
+const codeCoverageTask = require("@cypress/code-coverage/task")
+
+module.exports = defineConfig({
+  coverage: true,
+  codeCoverage: {
+    exclude: "cypress/**/*.*",
+  },
+  // Component testing, JavaScript, Vue.js, Vite
+  component: {
+    devServer,
+    devServerConfig: {},
+    setupNodeEvents(on, config) {
+      codeCoverageTask(on, config);
+      return config;
+    },
+  },
+})

setup-vite-vue/cypress/component/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+
+  </head>
+  <body>
+
+    <div id="__cy_root"></div>
+  </body>
+</html>

setup-vite-vue/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

setup-vite-vue/cypress/support/component.js

@@ -0,0 +1,4 @@
+// Ensure global app styles are loaded:
+import '../../src/main.css'
+
+import "@cypress/code-coverage/support";

setup-vite-vue/cypress/support/index.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+// Ensure global app styles are loaded:
+import '../../src/main.css'

setup-vite-vue/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

setup-vite-vue/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "setup-vite-vue",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@cypress/code-coverage": "3.10.0-dev.1",
+    "@cypress/vite-dev-server": "^2.2.2",
+    "@cypress/vue": "3",
+    "@vitejs/plugin-vue": "^2.2.0",
+    "cypress": "https://cdn.cypress.io/beta/npm/10.0.0/linux-x64/circle-10.0-release-e7718f7489276cac2e8ad71bc57a627eb0135fbd/cypress.tgz",
+    "vite": "^2.8.0",
+    "vite-plugin-istanbul": "^2.5.0"
+  }
+}

setup-vite-vue/src/App.cy.js

@@ -0,0 +1,8 @@
+import { mount } from '@cypress/vue'
+import App from './App.vue'
+
+it('shows the App', () => {
+  mount(App)
+  cy.get('[alt="Vue logo"]')
+  cy.get('h1').contains('Hello Vue 3 + Vite')
+})

setup-vite-vue/src/App.vue

@@ -0,0 +1,16 @@
+<script setup>
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<style>
+#app {
+  margin-top: 60px;
+}
+</style>

setup-vite-vue/src/components/HelloWorld.cy.js

@@ -0,0 +1,22 @@
+import { mount } from '@cypress/vue'
+import HelloWorld from './HelloWorld.vue'
+
+beforeEach(() => {
+  mount(HelloWorld, {
+    propsData: {
+      msg: 'Hello World',
+    },
+  })
+})
+
+it('shows the header', () => {
+  cy.get('h1').contains('Hello World')
+})
+
+it('renders the counter', () => {
+  cy.get('button').contains('count is: 0')
+})
+
+it('increments counter when clicked', () => {
+  cy.get('button').click().contains('count is: 1')
+})

setup-vite-vue/src/components/HelloWorld.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>

setup-vite-vue/src/main.css

@@ -0,0 +1,7 @@
+body {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}

setup-vite-vue/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './main.css'
+
+createApp(App).mount('#app')

setup-vite-vue/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import istanbul from 'vite-plugin-istanbul'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), istanbul({})]
+})