From b6f26eaa61eecb0281f3252c28cd1a8501f6c813 Mon Sep 17 00:00:00 2001 From: Daniel Egger Date: Mon, 20 Jun 2022 09:49:25 +0200 Subject: [PATCH] Vue test config with vitest --- client/.eslintrc.cjs | 33 +++++++------------ client/package.json | 11 +++---- client/postcss.config.js | 6 ---- .../__tests__/MainNavigationBar.spec.ts | 8 ++--- client/tsconfig.vitest.json | 6 +++- client/vite.config.ts | 16 +++++---- 6 files changed, 36 insertions(+), 44 deletions(-) delete mode 100644 client/postcss.config.js diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs index f29db5b6..e9f1f2e2 100644 --- a/client/.eslintrc.cjs +++ b/client/.eslintrc.cjs @@ -1,28 +1,19 @@ /* eslint-env node */ -require("@rushstack/eslint-patch/modern-module-resolution"); +require('@rushstack/eslint-patch/modern-module-resolution'); module.exports = { - "root": true, - "extends": [ - "plugin:vue/vue3-essential", - "eslint:recommended", - "@vue/eslint-config-typescript/recommended", - "@vue/eslint-config-prettier" + 'root': true, + 'extends': [ + 'plugin:vue/vue3-essential', + 'eslint:recommended', + '@vue/eslint-config-typescript/recommended', + // "@vue/eslint-config-prettier" ], - "env": { - "vue/setup-compiler-macros": true + 'env': { + 'vue/setup-compiler-macros': true }, - "overrides": [ - { - "files": [ - "cypress/integration/**.spec.{js,ts,jsx,tsx}" - ], - "extends": [ - "plugin:cypress/recommended" - ] - } - ], - "rules": { - "quotes": ["error", "single"] + 'rules': { + 'quotes': ['error', 'single'], + '@typescript-eslint/no-unused-vars': ['warn'], } } diff --git a/client/package.json b/client/package.json index 8d703d42..ec5b46fc 100644 --- a/client/package.json +++ b/client/package.json @@ -4,10 +4,8 @@ "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build && cp ./dist/index.html ../server/vbv_lernwelt/templates/vue/index.html && cp -r ./dist/static/vue ../server/vbv_lernwelt/static/", - "preview": "vite preview --port 5050", - "test:unit": "vitest --environment jsdom", - "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", - "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", + "test": "vitest run", + "coverage": "vitest run --coverage", "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, @@ -26,6 +24,7 @@ "@intlify/vite-plugin-vue-i18n": "^3.4.0", "@rollup/plugin-alias": "^3.1.9", "@rushstack/eslint-patch": "^1.1.0", + "@testing-library/vue": "^6.6.0", "@types/jsdom": "^16.2.14", "@types/node": "^16.11.26", "@vitejs/plugin-vue": "^2.3.1", @@ -38,7 +37,7 @@ "eslint": "^8.5.0", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-vue": "^8.2.0", - "jsdom": "^19.0.0", + "happy-dom": "^5.3.1", "postcss": "^8.4.12", "postcss-import": "^14.1.0", "prettier": "^2.5.1", @@ -47,7 +46,7 @@ "start-server-and-test": "^1.14.0", "typescript": "~4.6.3", "vite": "^2.9.1", - "vitest": "^0.8.1", + "vitest": "^0.15.1", "vue-tsc": "^0.33.9" } } diff --git a/client/postcss.config.js b/client/postcss.config.js deleted file mode 100644 index bb637173..00000000 --- a/client/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - 'postcss-import': {}, - autoprefixer: {}, - }, -} diff --git a/client/src/components/__tests__/MainNavigationBar.spec.ts b/client/src/components/__tests__/MainNavigationBar.spec.ts index 0050ea5e..4b81a1b7 100644 --- a/client/src/components/__tests__/MainNavigationBar.spec.ts +++ b/client/src/components/__tests__/MainNavigationBar.spec.ts @@ -1,11 +1,11 @@ -import { describe, it, expect } from 'vitest' +import {describe, expect, it} from 'vitest' -import { mount } from '@vue/test-utils' +import {mount} from '@vue/test-utils' import MainNavigationBar from '../MainNavigationBar.vue' describe('MainNavigationBar', () => { it('renders properly', () => { - const wrapper = mount(MainNavigationBar, { }) - expect(wrapper.text()).toContain('Ich bin ein myVBV Heade') + const wrapper = mount(MainNavigationBar, {}) + expect(wrapper.text()).toContain('myVBV') }) }) diff --git a/client/tsconfig.vitest.json b/client/tsconfig.vitest.json index d080d611..ee2193e4 100644 --- a/client/tsconfig.vitest.json +++ b/client/tsconfig.vitest.json @@ -4,6 +4,10 @@ "compilerOptions": { "composite": true, "lib": [], - "types": ["node", "jsdom"] + "types": [ + "node", + "jsdom", + "vitest/globals" + ] } } diff --git a/client/vite.config.ts b/client/vite.config.ts index 6a68449a..8fc64adf 100644 --- a/client/vite.config.ts +++ b/client/vite.config.ts @@ -6,17 +6,17 @@ import vue from '@vitejs/plugin-vue' import alias from '@rollup/plugin-alias' // https://vitejs.dev/config/ -export default defineConfig(({mode}) => { - process.env = {...process.env, ...loadEnv(mode, process.cwd())}; +export default defineConfig(({ mode }) => { + process.env = { ...process.env, ...loadEnv(mode, process.cwd()) } return { plugins: [ vue({ template: { compilerOptions: { // treat all tags which start with ' tag.startsWith('it-') - } - } + isCustomElement: (tag) => tag.startsWith('it-'), + }, + }, }), // vueI18n({ // include: path.resolve(__dirname, './locales/**') @@ -40,6 +40,10 @@ export default defineConfig(({mode}) => { }, build: { assetsDir: 'static/vue', - } + }, + test: { + globals: true, + environment: 'happy-dom', + }, } })