Merge pull request #12362 from nextcloud/fix/vue3/vue-test-utils

feat(vue3): fix automated tests

jest.config.js

@@ -9,12 +9,16 @@ const { resolve } = require('node:path')
 // TODO: find a way to consolidate this in one place, with webpack.common.js
 const ignorePatterns = [
 	'@mdi/svg',
+	'@ckpack',
 	'bail',
 	'ccount', // ESM dependency of remark-gfm
+	'character-entities',
 	'comma-separated-tokens',
 	'decode-named-character-reference',
 	'devlop',
+	'emoji-mart-vue-fast',
 	'escape-string-regexp',
+	'estree-util-is-identifier-name',
 	'hast-.*',
 	'is-.*',
 	'longest-streak', // ESM dependency of remark-gfm
@@ -56,7 +60,9 @@ module.exports = {
 	],
 
 	testEnvironment: 'jest-environment-jsdom',
-
+	testEnvironmentOptions: {
+		customExportConditions: ['node', 'node-addons'],
+	},
 	moduleFileExtensions: [
 		'js',
 		'ts',
@@ -77,7 +83,7 @@ module.exports = {
 			},
 		}],
 		'\\.js$': 'babel-jest',
-		'\\.vue$': '@vue/vue2-jest',
+		'\\.vue$': '@vue/vue3-jest',
 		'\\.tflite$': 'jest-transform-stub',
 		'\\.(css|scss)$': 'jest-transform-stub',
 	},

package.json

@@ -82,7 +82,6 @@
     "@vue/vue3-jest": "^29.2.6",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
     "esbuild-loader": "^4.1.0",
-    "flush-promises": "^1.0.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-localstorage-mock": "^2.4.26",

src/__mocks__/router.js

@@ -2,14 +2,15 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import VueRouter from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 const Stub = {
 	name: 'Stub',
 	template: '<div></div>',
 }
 
-export default new VueRouter({
+export default createRouter({
+	history: createWebHistory(),
 	linkActiveClass: 'active',
 	routes: [
 		{

src/components/AvatarWrapper/AvatarWrapper.spec.js

@@ -29,8 +29,10 @@ describe('AvatarWrapper.vue', () => {
 	describe('render user avatar', () => {
 		test('component renders NcAvatar with standard size by default', () => {
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					name: USER_NAME,
 				},
 			})
@@ -42,8 +44,10 @@ describe('AvatarWrapper.vue', () => {
 
 		test('component does not render NcAvatar for non-users', () => {
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					name: 'emails',
 					source: 'emails',
 				},
@@ -56,8 +60,10 @@ describe('AvatarWrapper.vue', () => {
 		test('component renders NcAvatar with specified size', () => {
 			const size = 22
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					name: USER_NAME,
 					size,
 				},
@@ -69,8 +75,10 @@ describe('AvatarWrapper.vue', () => {
 
 		test('component pass props to NcAvatar correctly', async () => {
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					id: USER_ID,
 					name: USER_NAME,
 					showUserStatus: true,
@@ -86,16 +94,18 @@ describe('AvatarWrapper.vue', () => {
 			expect(avatar.props('menuContainer')).toBe(MENU_CONTAINER)
 			expect(avatar.props('showUserStatus')).toBe(true)
 			expect(avatar.props('showUserStatusCompact')).toBe(false)
-			expect(avatar.props('preloadedUserStatus')).toBe(PRELOADED_USER_STATUS)
+			expect(avatar.props('preloadedUserStatus')).toStrictEqual(PRELOADED_USER_STATUS)
 			expect(avatar.props('size')).toBe(44)
 		})
 	})
 
 	describe('render specific icons', () => {
 		test('component render emails icon properly', () => {
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					name: 'emails',
 					source: 'emails',
 				},
@@ -108,8 +118,10 @@ describe('AvatarWrapper.vue', () => {
 
 		test('component render groups icon properly', () => {
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					name: 'groups',
 					source: 'groups',
 				},
@@ -124,8 +136,10 @@ describe('AvatarWrapper.vue', () => {
 	describe('render guests', () => {
 		test('component render icon of guest properly', () => {
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					name: t('spreed', 'Guest'),
 					source: 'guests',
 				},
@@ -138,8 +152,10 @@ describe('AvatarWrapper.vue', () => {
 
 		test('component render icon of guest with name properly', () => {
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					name: USER_NAME,
 					source: 'guests',
 				},
@@ -151,8 +167,10 @@ describe('AvatarWrapper.vue', () => {
 
 		test('component render icon of deleted user properly', () => {
 			const wrapper = shallowMount(AvatarWrapper, {
-				store,
-				propsData: {
+				global: {
+					plugins: [store],
+				},
+				props: {
 					name: USER_NAME,
 					source: 'deleted_users',
 				},