vuejs · wopian · Dec 3, 2021 · Dec 3, 2021 · Dec 3, 2021 · Dec 3, 2021
diff --git a/e2e/3.x/code-coverage/babel.config.js b/e2e/3.x/code-coverage/babel.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+          esmodules: false
+        }
+      }
+    ]
+  ]
+}
diff --git a/e2e/3.x/code-coverage/components/Basic.spec.js b/e2e/3.x/code-coverage/components/Basic.spec.js
@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+
+import Basic from './Basic.vue'
+
+describe('Basic', () => {
+  it('collects test coverage', () => {
+    expect.assertions(4)
+
+    const wrapper = shallowMount(Basic)
+    const div = wrapper.find('div')
+    const h1 = wrapper.find('h1')
+
+    expect(wrapper.element).toMatchSnapshot()
+    expect(div.attributes('class')).toBe('hello')
+    expect(h1.attributes('class')).toBe('blue')
+    expect(h1.text()).toBe('Hello World')
+  })
+})
diff --git a/e2e/3.x/code-coverage/components/Basic.vue b/e2e/3.x/code-coverage/components/Basic.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="hello">
+    <h1 :class="headingClasses">
+      {{ message }}
+    </h1>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const message = 'Hello World'
+let isCrazy = false
+
+const headingClasses = computed(() => {
+  return {
+    red: isCrazy,
+    blue: !isCrazy,
+    shadow: isCrazy
+  }
+})
+
+const toggleClass = () => {
+  isCrazy = !isCrazy
+}
+</script>
diff --git a/e2e/3.x/code-coverage/components/Untested.vue b/e2e/3.x/code-coverage/components/Untested.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="hello">
+    <h1 :class="headingClasses">
+      {{ message }}
+    </h1>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const message = 'Hello World'
+let isCrazy = false
+
+const headingClasses = computed(() => {
+  return {
+    red: isCrazy,
+    blue: !isCrazy,
+    shadow: isCrazy
+  }
+})
+
+const toggleClass = () => {
+  isCrazy = !isCrazy
+}
+</script>
diff --git a/e2e/3.x/code-coverage/components/__snapshots__/Basic.spec.js.snap b/e2e/3.x/code-coverage/components/__snapshots__/Basic.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic collects test coverage 1`] = `
+<div
+  class="hello"
+>
+  <h1
+    class="blue"
+  >
+    Hello World
+  </h1>
+</div>
+`;
diff --git a/e2e/3.x/code-coverage/jest.config.js b/e2e/3.x/code-coverage/jest.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  moduleFileExtensions: ['js', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': '@vue/vue3-jest',
+    '^.+\\.js$': 'babel-jest'
+  },
+  collectCoverageFrom: ['components/*.vue'],
+  coverageReporters: ['lcov', 'text']
+}
diff --git a/e2e/3.x/code-coverage/package.json b/e2e/3.x/code-coverage/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vue3-code-coverage",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "moduleResolution": "node",
+  "scripts": {
+    "test": "jest --no-cache --coverage"
+  },
+  "dependencies": {
+    "vue": "^3.2.22"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@vue/compiler-sfc": "^3.2.22",
+    "@vue/test-utils": "2.0.0-rc.11",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "babel-jest": "^27.3.1",
+    "jest": "^27.4.3"
+  }
+}