nvh95 · nvh95 · Jun 21, 2022 · Apr 9, 2022 · Apr 9, 2022 · Apr 9, 2022
diff --git a/examples/vue/.gitignore b/examples/vue/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue/.vscode/extensions.json b/examples/vue/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
diff --git a/examples/vue/README-vue.md b/examples/vue/README-vue.md
@@ -0,0 +1,7 @@
+# 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)
diff --git a/examples/vue/README.md b/examples/vue/README.md
@@ -0,0 +1,9 @@
+# Vue 3 + Vite + Jest Preview
+
+## Installation and Usage
+
+Please refer to [Installation](../../README.md#installation) and [Usage](../../README.md#usage).
+
+## Caveats
+
+Currently, the [Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css) is not supported yet. We are working to support soon in the future release.
diff --git a/examples/vue/babel.config.js b/examples/vue/babel.config.js
@@ -0,0 +1,5 @@
+// Not sure why default babel settings does not work
+// https://github.com/vuejs/vue-jest/issues/461
+module.exports = {
+  presets: ['@babel/preset-env'],
+};
diff --git a/examples/vue/index.html b/examples/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>
diff --git a/examples/vue/jest.config.js b/examples/vue/jest.config.js
@@ -0,0 +1,28 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
+  transform: {
+    '^.+\\.(js|ts)$': 'ts-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
+    '^.+\\.css$': 'jest-preview/transforms/css',
+    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json|vue)$)':
+      'jest-preview/transforms/file',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+  ],
+  testEnvironment: 'jsdom',
+  moduleFileExtensions: [
+    'js',
+    'tsx',
+    'ts',
+    'web.js',
+    'web.ts',
+    'web.tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node',
+  ],
+};
diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "vite-vue",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "jest --watch",
+    "test:nc": "jest --watch --no-cache",
+    "jest-preview": "jest-preview"
+  },
+  "dependencies": {
+    "@babel/preset-env": "^7.16.11",
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^6.5.1",
+    "@types/jest": "^27.4.1",
+    "@vitejs/plugin-vue": "^2.3.0",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "jest": "^27.5.1",
+    "jest-preview": "file:../..",
+    "ts-jest": "^27.1.4",
+    "vite": "^2.9.0"
+  }
+}
diff --git a/examples/vue/public/favicon.ico b/examples/vue/public/favicon.ico
diff --git a/examples/vue/src/App.spec.js b/examples/vue/src/App.spec.js
@@ -0,0 +1,8 @@
+import { render, fireEvent } from '@testing-library/vue';
+import App from './App.vue';
+import { debug } from 'jest-preview';
+
+test('increments value on click', async () => {
+  render(App);
+  debug();
+});
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -0,0 +1,23 @@
+<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';
+import logo from './assets/logo.png';
+import './app.css';
+</script>
+
+<template>
+  <img alt="Vue logo" :src="logo" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/examples/vue/src/app.css b/examples/vue/src/app.css
@@ -0,0 +1,3 @@
+.imported-css {
+  color: orange;
+}
diff --git a/examples/vue/src/assets/logo.png b/examples/vue/src/assets/logo.png
diff --git a/examples/vue/src/components/HelloWorld.vue b/examples/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 class="imported-css">This message is styled by imported CSS</p>
+  <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>
diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vue/src/setupTests.js b/examples/vue/src/setupTests.js
@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom/extend-expect';
+import { jestPreviewConfigure } from 'jest-preview';
+
+jestPreviewConfigure({
+  autoPreview: true,
+});
+
+window.matchMedia = (query) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  dispatchEvent: jest.fn(),
+  addListener: jest.fn(),
+  removeListener: jest.fn(),
+});
+
+Object.defineProperty(URL, 'createObjectURL', {
+  writable: true,
+  value: jest.fn(),
+});
diff --git a/examples/vue/vite.config.js b/examples/vue/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})
diff --git a/website/docs/examples/vue.md b/website/docs/examples/vue.md
@@ -0,0 +1,7 @@
+---
+sidebar_position: 6
+---
+
+# Vue
+
+See more at [Vue Example](https://github.com/nvh95/jest-preview/tree/main/examples/vue)