Merge branch 'master' into maintenance-mode-script

.github/dependabot.yml

@@ -1,179 +1,62 @@
 version: 2
 updates:
+- package-ecosystem: "github-actions"
+  directory: "/"
+  schedule:
+    interval: weekly
+    day: "saturday"
+    timezone: "Europe/Berlin"
+    time: "03:00"
+  # open-pull-requests-limit: 10
+  # ignore:
+
 - package-ecosystem: npm
   directory: "/"
   schedule:
-    interval: daily
+    interval: weekly
-    time: "04:00"
+    day: "saturday"
-  open-pull-requests-limit: 10
+    timezone: "Europe/Berlin"
-  ignore:
+    time: "03:00"
-  - dependency-name: cypress
-    versions:
-    - 6.3.0
-    - 6.4.0
-    - 6.5.0
-    - 6.6.0
-    - 6.7.1
-    - 6.8.0
-    - 7.0.0
-    - 7.0.1
-    - 7.1.0
-  - dependency-name: cypress-cucumber-preprocessor
-    versions:
-    - 4.0.0
-    - 4.0.1
-    - 4.0.3
-  - dependency-name: date-fns
-    versions:
-    - 2.16.1
-    - 2.17.0
-    - 2.18.0
-    - 2.19.0
-    - 2.20.0
-    - 2.20.1
-    - 2.20.2
-    - 2.20.3
-    - 2.21.0
-  - dependency-name: cypress-file-upload
-    versions:
-    - 5.0.2
-    - 5.0.3
-    - 5.0.4
-    - 5.0.5
-  - dependency-name: neo4j-driver
-    versions:
-    - 4.2.2
 - package-ecosystem: npm
   directory: "/backend"
   schedule:
-    interval: daily
+    interval: weekly
-    time: "04:00"
+    day: "saturday"
-  open-pull-requests-limit: 10
+    timezone: "Europe/Berlin"
-  ignore:
+    time: "03:00"
-  - dependency-name: y18n
-    versions:
-    - 4.0.1
-    - 4.0.2
-  - dependency-name: metascraper-publisher
-    versions:
-    - 5.16.16
-    - 5.18.1
-    - 5.18.12
-    - 5.18.2
-    - 5.18.4
-    - 5.18.5
-    - 5.18.6
-    - 5.18.9
-    - 5.20.0
-    - 5.21.0
-    - 5.21.2
-    - 5.21.3
-    - 5.21.4
-    - 5.21.5
-  - dependency-name: metascraper-author
-    versions:
-    - 5.16.16
-    - 5.18.1
-    - 5.18.12
-    - 5.18.2
-    - 5.18.4
-    - 5.18.5
-    - 5.18.6
-    - 5.18.9
-    - 5.20.0
-    - 5.21.0
-    - 5.21.2
-    - 5.21.3
-    - 5.21.4
-    - 5.21.5
-  - dependency-name: neo4j-driver
-    versions:
-    - 4.2.2
-  - dependency-name: neo4j-graphql-js
-    versions:
-    - 2.19.1
-  - dependency-name: mustache
-    versions:
-    - 4.1.0
 - package-ecosystem: npm
   directory: "/webapp"
   schedule:
-    interval: daily
+    interval: weekly
-    time: "04:00"
+    day: "saturday"
-  open-pull-requests-limit: 10
+    timezone: "Europe/Berlin"
-  ignore:
+    time: "03:00"
-  - dependency-name: nuxt
+
-    versions:
-    - 2.14.12
-    - 2.15.0
-    - 2.15.1
-    - 2.15.2
-    - 2.15.3
-  - dependency-name: v-tooltip
-    versions:
-    - 2.1.2
-  - dependency-name: "@vue/server-test-utils"
-    versions:
-    - 1.1.2
-    - 1.1.3
-  - dependency-name: node-notifier
-    versions:
-    - 8.0.1
-- package-ecosystem: docker
-  directory: "/webapp"
-  schedule:
-    interval: daily
-    time: "04:00"
-  open-pull-requests-limit: 10
-  ignore:
-  - dependency-name: node
-    versions:
-    - ">= 15.5.a, < 15.6"
-  - dependency-name: node
-    versions:
-    - 15.10.0.pre.alpine3.10
-    - 15.11.0.pre.alpine3.10
-    - 15.12.0.pre.alpine3.10
-    - 15.13.0.pre.alpine3.10
-    - 15.7.0.pre.alpine3.10
-    - 15.8.0.pre.alpine3.10
-    - 15.9.0.pre.alpine3.10
 - package-ecosystem: docker
   directory: "/backend"
   schedule:
-    interval: daily
+    interval: weekly
-    time: "04:00"
+    day: "saturday"
-  open-pull-requests-limit: 10
+    timezone: "Europe/Berlin"
-  ignore:
+    time: "03:00"
-  - dependency-name: node
+- package-ecosystem: docker
-    versions:
+  directory: "/webapp"
-    - ">= 15.4.a, < 15.5"
+  schedule:
-  - dependency-name: node
+    interval: weekly
-    versions:
+    day: "saturday"
-    - ">= 15.5.a, < 15.6"
+    timezone: "Europe/Berlin"
-  - dependency-name: node
+    time: "03:00"
-    versions:
-    - 15.10.0.pre.alpine3.10
-    - 15.11.0.pre.alpine3.10
-    - 15.12.0.pre.alpine3.10
-    - 15.13.0.pre.alpine3.10
-    - 15.7.0.pre.alpine3.10
-    - 15.8.0.pre.alpine3.10
-    - 15.9.0.pre.alpine3.10
 - package-ecosystem: docker
   directory: "/neo4j"
   schedule:
-    interval: daily
+    interval: weekly
-    time: "04:00"
+    day: "saturday"
-  open-pull-requests-limit: 10
+    timezone: "Europe/Berlin"
-  ignore:
+    time: "03:00"
-  - dependency-name: neo4j
-    versions:
-    - 4.2.3
-    - 4.2.4
 - package-ecosystem: docker
-  directory: "/deployment/legacy-migration/maintenance-worker"
+  directory: "/deployment/src/docker"
   schedule:
-    interval: daily
+    interval: weekly
-    time: "04:00"
+    day: "saturday"
-  open-pull-requests-limit: 10
+    timezone: "Europe/Berlin"
+    time: "03:00"

.github/workflows/test.yml

@@ -168,6 +168,8 @@ jobs:
     name: Unit tests - backend
     runs-on: ubuntu-latest
     needs: [build_test_neo4j,build_test_backend]
+    permissions: 
+      checks: write
     steps:
       ##########################################################################
       # CHECKOUT CODE ##########################################################
@@ -225,6 +227,8 @@ jobs:
     name: Unit tests - webapp
     runs-on: ubuntu-latest
     needs: [build_test_webapp]
+    permissions: 
+      checks: write
     steps:
       ##########################################################################
       # CHECKOUT CODE ##########################################################
@@ -269,7 +273,7 @@ jobs:
           report_name: Coverage Webapp
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 63
+          min_coverage: 83
           token: ${{ github.token }}
 
   ##############################################################################

deployment/docker-compose.yml

@@ -7,6 +7,7 @@ services:
       dockerfile: ../webapp/Dockerfile
       context: ../webapp
       target: base
+    command: sleep 0
 
   webapp-code:
     image: ocelotsocialnetwork/webapp:local-code
@@ -14,10 +15,11 @@ services:
       dockerfile: ../webapp/Dockerfile
       context: ../webapp
       target: code
+    command: sleep 0
 
   webapp:
     image: ocelotsocialnetwork/webapp-branded:local-${CONFIGURATION}
-    container_name: webapp
+    container_name: webapp-branded
     build:
       dockerfile: src/docker/webapp.Dockerfile
       target: branded
@@ -51,6 +53,7 @@ services:
       dockerfile: ../backend/Dockerfile
       context: ../backend
       target: base
+    command: sleep 0
   
   backend-code:
     image: ocelotsocialnetwork/backend:local-code
@@ -58,13 +61,14 @@ services:
       dockerfile: ../backend/Dockerfile
       context: ../backend
       target: code
+    command: sleep 0
   
   backend:
     image: ocelotsocialnetwork/backend-branded:local-${CONFIGURATION}
     container_name: backend
     build:
       dockerfile: src/docker/backend.Dockerfile
-      target: branded
+      target: branded-branded
       context: .
       args:
         - CONFIGURATION=$CONFIGURATION
@@ -106,6 +110,7 @@ services:
       dockerfile: ../webapp/Dockerfile.maintenance
       context: ../webapp
       target: base
+    command: sleep 0
 
   maintenance-code:
     image: ocelotsocialnetwork/maintenance:local-code
@@ -113,11 +118,12 @@ services:
       dockerfile: ../webapp/Dockerfile.maintenance
       context: ../webapp
       target: code
+    command: sleep 0
 
   maintenance:
     # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
     image: ocelotsocialnetwork/maintenance-branded:local-${CONFIGURATION}
-    container_name: maintenance
+    container_name: maintenance-branded
     build:
       # TODO: Separate from webapp, this must be independent
       dockerfile: src/docker/maintenance.Dockerfile
@@ -152,7 +158,7 @@ services:
 
   mailserver:
     image: djfarrelly/maildev
-    container_name: mailserver
+    container_name: mailserver-branded
     ports:
       - 1080:80
     networks:

deployment/src/docker/maintenance.Dockerfile

@@ -14,7 +14,12 @@ ARG CONFIGURATION=example
 # copy public constants into the Docker image to brand it
 COPY configurations/${CONFIGURATION}/branding/static/ static/
 COPY configurations/${CONFIGURATION}/branding/constants/ constants/
-COPY configurations/${CONFIGURATION}/branding/locales/ locales/
+
+# locales
+COPY configurations/${CONFIGURATION}/branding/locales/*.json locales/tmp/
+COPY src/tools/ tools/
+RUN apk add --no-cache bash jq
+RUN tools/merge-locales.sh
 
 ##################################################################################
 # BUILD ##########################################################################

deployment/src/docker/webapp.Dockerfile

@@ -12,17 +12,16 @@ FROM $APP_IMAGE_CODE as code
 ARG CONFIGURATION=example
 
 # copy public constants into the Docker image to brand it
-COPY src/tools/ tools/
 COPY configurations/${CONFIGURATION}/branding/static/ static/
 COPY configurations/${CONFIGURATION}/branding/constants/ constants/
 COPY configurations/${CONFIGURATION}/branding/locales/html/ locales/html/
-# COPY configurations/${CONFIGURATION}/branding/locales/index.js locales/index.js
-COPY configurations/${CONFIGURATION}/branding/locales/*.json locales/tmp/
 COPY configurations/${CONFIGURATION}/branding/assets/styles/imports/ assets/styles/imports/
 COPY configurations/${CONFIGURATION}/branding/assets/fonts/ assets/fonts/
 
+# locales
+COPY configurations/${CONFIGURATION}/branding/locales/*.json locales/tmp/
+COPY src/tools/ tools/
 RUN apk add --no-cache bash jq
-
 RUN tools/merge-locales.sh
 
 ##################################################################################

webapp/components/AvatarMenu/AvatarMenu.spec.js

@@ -1,11 +1,13 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import AvatarMenu from './AvatarMenu.vue'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['router-link'] = '<span><slot /></span>'
+  'nuxt-link': true,
+  'router-link': true,
+}
 
 describe('AvatarMenu.vue', () => {
   let propsData, getters, wrapper, mocks
@@ -34,7 +36,7 @@ describe('AvatarMenu.vue', () => {
     const store = new Vuex.Store({
       getters,
     })
-    return mount(AvatarMenu, { propsData, localVue, store, mocks })
+    return mount(AvatarMenu, { propsData, localVue, store, mocks, stubs })
   }
 
   describe('mount', () => {

webapp/components/Badges.spec.js

@@ -14,7 +14,7 @@ describe('Badges.vue', () => {
     }
 
     it('has class "hc-badges"', () => {
-      expect(Wrapper().contains('.hc-badges')).toBe(true)
+      expect(Wrapper().find('.hc-badges').exists()).toBe(true)
     })
 
     describe('given a badge', () => {
@@ -23,7 +23,7 @@ describe('Badges.vue', () => {
       })
 
       it('proxies badge icon, which is just a URL without metadata', () => {
-        expect(Wrapper().contains('img[src="/api/path/to/some/icon"]')).toBe(true)
+        expect(Wrapper().find('img[src="/api/path/to/some/icon"]').exists()).toBe(true)
       })
     })
   })

webapp/components/Category/index.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 import Category from './index'
 
@@ -9,7 +9,7 @@ describe('Category', () => {
   let name
 
   const Wrapper = () => {
-    return shallowMount(Category, {
+    return mount(Category, {
       localVue,
       propsData: {
         icon,
@@ -27,8 +27,9 @@ describe('Category', () => {
     it('shows Name', () => {
       expect(Wrapper().text()).toContain('Peter')
     })
-    it('shows Icon Svg', () => {
+
-      expect(Wrapper().contains('svg'))
+    it('shows base icon', () => {
+      expect(Wrapper().find('.base-icon').exists()).toBe(true)
     })
   })
 })

webapp/components/CommentCard/CommentCard.spec.js

@@ -1,13 +1,10 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import CommentCard from './CommentCard.vue'
 import Vuex from 'vuex'
 
 const localVue = global.localVue
 localVue.directive('scrollTo', jest.fn())
 
-config.stubs['client-only'] = '<span><slot /></span>'
-config.stubs['nuxt-link'] = '<span><slot /></span>'
-
 describe('CommentCard.vue', () => {
   let propsData, mocks, stubs, getters, wrapper, Wrapper
 
@@ -46,6 +43,8 @@ describe('CommentCard.vue', () => {
     }
     stubs = {
       ContentViewer: true,
+      'client-only': true,
+      'nuxt-link': true,
     }
     getters = {
       'auth/user': () => {
@@ -56,7 +55,9 @@ describe('CommentCard.vue', () => {
   })
 
   describe('mount', () => {
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     Wrapper = () => {
       const store = new Vuex.Store({

webapp/components/CommentList/CommentList.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import CommentList from './CommentList'
 import Vuex from 'vuex'
 import Vue from 'vue'
@@ -8,10 +8,6 @@ const localVue = global.localVue
 localVue.filter('truncate', (string) => string)
 localVue.directive('scrollTo', jest.fn())
 
-config.stubs['v-popover'] = '<span><slot /></span>'
-config.stubs['nuxt-link'] = '<span><slot /></span>'
-config.stubs['client-only'] = '<span><slot /></span>'
-
 describe('CommentList.vue', () => {
   let mocks, store, wrapper, propsData, stubs
 
@@ -72,7 +68,10 @@ describe('CommentList.vue', () => {
         },
       }
       stubs = {
-        EditorContent: "<div class='stub'></div>",
+        EditorContent: true,
+        'v-popover': true,
+        'nuxt-link': true,
+        'client-only': true,
       }
     })
 
@@ -92,7 +91,9 @@ describe('CommentList.vue', () => {
     })
 
     describe('scrollToAnchor mixin', () => {
-      beforeEach(jest.useFakeTimers)
+      beforeEach(() => {
+        jest.useFakeTimers()
+      })
 
       describe('$route.hash !== `#comments`', () => {
         it('skips $scrollTo', () => {

webapp/components/ComponentSlider/ComponentSlider.spec.js

@@ -52,7 +52,7 @@ describe('ComponentSlider.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('click on next Button', async () => {

webapp/components/ContentMenu/ContentMenu.spec.js

@@ -1,4 +1,4 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
 import Styleguide from '@human-connection/styleguide'
@@ -10,7 +10,11 @@ localVue.use(Styleguide)
 localVue.use(VTooltip)
 localVue.use(Vuex)
 
-config.stubs['router-link'] = '<span><slot /></span>'
+const stubs = {
+  'router-link': {
+    template: '<span><slot /></span>',
+  },
+}
 
 let getters, mutations, mocks, menuToggle, openModalSpy
 
@@ -36,7 +40,7 @@ describe('ContentMenu.vue', () => {
       'auth/isAdmin': () => false,
     }
 
-    const openContentMenu = (values = {}) => {
+    const openContentMenu = async (values = {}) => {
       const store = new Vuex.Store({ mutations, getters })
       const wrapper = mount(ContentMenu, {
         propsData: {
@@ -45,16 +49,17 @@ describe('ContentMenu.vue', () => {
         mocks,
         store,
         localVue,
+        stubs,
       })
       menuToggle = wrapper.find('[data-test="content-menu-button"]')
-      menuToggle.trigger('click')
+      await menuToggle.trigger('click')
       return wrapper
     }
 
     describe('owner of contribution', () => {
       let wrapper
-      beforeEach(() => {
+      beforeEach(async () => {
-        wrapper = openContentMenu({
+        wrapper = await openContentMenu({
           isOwner: true,
           resourceType: 'contribution',
           resource: {
@@ -86,9 +91,9 @@ describe('ContentMenu.vue', () => {
     })
 
     describe('admin can', () => {
-      it('pin unpinned post', () => {
+      it('pin unpinned post', async () => {
         getters['auth/isAdmin'] = () => true
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'contribution',
           resource: {
@@ -111,8 +116,8 @@ describe('ContentMenu.vue', () => {
         ])
       })
 
-      it('unpin pinned post', () => {
+      it('unpin pinned post', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'contribution',
           resource: {
@@ -135,11 +140,11 @@ describe('ContentMenu.vue', () => {
         ])
       })
 
-      it('can delete another user', () => {
+      it('can delete another user', async () => {
         getters['auth/user'] = () => {
           return { id: 'some-user', slug: 'some-user' }
         }
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           resourceType: 'user',
           resource: {
             id: 'another-user',
@@ -161,8 +166,8 @@ describe('ContentMenu.vue', () => {
         ])
       })
 
-      it('can not delete the own account', () => {
+      it('can not delete the own account', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           resourceType: 'user',
           resource: {
             id: 'some-user',
@@ -179,8 +184,8 @@ describe('ContentMenu.vue', () => {
 
     describe('owner of comment can', () => {
       let wrapper
-      beforeEach(() => {
+      beforeEach(async () => {
-        wrapper = openContentMenu({
+        wrapper = await openContentMenu({
           isOwner: true,
           resourceType: 'comment',
           resource: {
@@ -208,10 +213,10 @@ describe('ContentMenu.vue', () => {
     })
 
     describe('reporting', () => {
-      it('a post of another user is possible', () => {
+      it('a post of another user is possible', async () => {
         getters['auth/isAdmin'] = () => false
         getters['auth/isModerator'] = () => false
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'contribution',
           resource: {
@@ -227,8 +232,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('report')
       })
 
-      it('a comment of another user is possible', () => {
+      it('a comment of another user is possible', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'comment',
           resource: {
@@ -244,8 +249,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('report')
       })
 
-      it('another user is possible', () => {
+      it('another user is possible', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'user',
           resource: {
@@ -261,8 +266,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('report')
       })
 
-      it('another organization is possible', () => {
+      it('another organization is possible', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'organization',
           resource: {
@@ -280,10 +285,10 @@ describe('ContentMenu.vue', () => {
     })
 
     describe('moderator', () => {
-      it('can disable posts', () => {
+      it('can disable posts', async () => {
         getters['auth/isAdmin'] = () => false
         getters['auth/isModerator'] = () => true
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'contribution',
           resource: {
@@ -300,8 +305,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('disable')
       })
 
-      it('can disable comments', () => {
+      it('can disable comments', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'comment',
           resource: {
@@ -318,8 +323,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('disable')
       })
 
-      it('can disable users', () => {
+      it('can disable users', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'user',
           resource: {
@@ -336,8 +341,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('disable')
       })
 
-      it('can disable organizations', () => {
+      it('can disable organizations', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'organization',
           resource: {
@@ -354,8 +359,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('disable')
       })
 
-      it('can release posts', () => {
+      it('can release posts', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'contribution',
           resource: {
@@ -372,8 +377,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('release')
       })
 
-      it('can release comments', () => {
+      it('can release comments', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'comment',
           resource: {
@@ -390,8 +395,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('release')
       })
 
-      it('can release users', () => {
+      it('can release users', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'user',
           resource: {
@@ -408,8 +413,8 @@ describe('ContentMenu.vue', () => {
         expect(openModalSpy).toHaveBeenCalledWith('release')
       })
 
-      it('can release organizations', () => {
+      it('can release organizations', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'organization',
           resource: {
@@ -428,10 +433,10 @@ describe('ContentMenu.vue', () => {
     })
 
     describe('user', () => {
-      it('can access settings', () => {
+      it('can access settings', async () => {
         getters['auth/isAdmin'] = () => false
         getters['auth/isModerator'] = () => false
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: true,
           resourceType: 'user',
           resource: {
@@ -448,8 +453,8 @@ describe('ContentMenu.vue', () => {
         ).toBe('/settings')
       })
 
-      it('can mute other users', () => {
+      it('can mute other users', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'user',
           resource: {
@@ -472,8 +477,8 @@ describe('ContentMenu.vue', () => {
         ])
       })
 
-      it('can unmute muted users', () => {
+      it('can unmute muted users', async () => {
-        const wrapper = openContentMenu({
+        const wrapper = await openContentMenu({
           isOwner: false,
           resourceType: 'user',
           resource: {

webapp/components/ContentMenu/GroupContentMenu.spec.js

@@ -1,9 +1,13 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import GroupContentMenu from './GroupContentMenu.vue'
 
 const localVue = global.localVue
 
-config.stubs['router-link'] = '<span><slot /></span>'
+const stubs = {
+  'router-link': {
+    template: '<span><slot /></span>',
+  },
+}
 
 const propsData = {
   usage: 'groupTeaser',
@@ -24,7 +28,7 @@ describe('GroupContentMenu', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(GroupContentMenu, { propsData, mocks, localVue })
+      return mount(GroupContentMenu, { propsData, mocks, localVue, stubs })
     }
 
     beforeEach(() => {

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import ContributionForm from './ContributionForm.vue'
 
 import Vuex from 'vuex'
@@ -11,9 +11,11 @@ global.MutationObserver = MutationObserver
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'client-only': true,
-config.stubs['v-popover'] = '<span><slot /></span>'
+  'nuxt-link': true,
+  'v-popover': true,
+}
 
 describe('ContributionForm.vue', () => {
   let wrapper, postTitleInput, expectedParams, cancelBtn, mocks, propsData
@@ -88,6 +90,7 @@ describe('ContributionForm.vue', () => {
         localVue,
         store,
         propsData,
+        stubs,
       })
     }
 
@@ -163,7 +166,7 @@ describe('ContributionForm.vue', () => {
             .mockImplementation(function () {
               this.onload({ target: { result: 'someUrlToImage' } })
             })
-          wrapper.find(ImageUploader).vm.$emit('addHeroImage', imageUpload)
+          wrapper.findComponent(ImageUploader).vm.$emit('addHeroImage', imageUpload)
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
           expect(spy).toHaveBeenCalledWith(imageUpload)

webapp/components/DeleteData/DeleteData.spec.js

@@ -115,9 +115,9 @@ describe('DeleteData.vue', () => {
         enableContributionDeletionCheckbox = wrapper.find(
           '[data-test="contributions-deletion-checkbox"]',
         )
-        enableContributionDeletionCheckbox.trigger('click')
+        enableContributionDeletionCheckbox.setChecked(true)
         enableCommentDeletionCheckbox = wrapper.find('[data-test="comments-deletion-checkbox"]')
-        enableCommentDeletionCheckbox.trigger('click')
+        enableCommentDeletionCheckbox.setChecked(true)
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -133,7 +133,7 @@ describe('DeleteData.vue', () => {
         enableContributionDeletionCheckbox = wrapper.find(
           '[data-test="contributions-deletion-checkbox"]',
         )
-        enableContributionDeletionCheckbox.trigger('click')
+        enableContributionDeletionCheckbox.setChecked(true)
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -147,7 +147,7 @@ describe('DeleteData.vue', () => {
 
       it("deletes a user's comments if requested", () => {
         enableCommentDeletionCheckbox = wrapper.find('[data-test="comments-deletion-checkbox"]')
-        enableCommentDeletionCheckbox.trigger('click')
+        enableCommentDeletionCheckbox.setChecked(true)
         deleteAccountBtn.trigger('click')
         expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
           expect.objectContaining({

webapp/components/Editor/Editor.spec.js

@@ -35,7 +35,7 @@ describe('Editor.vue', () => {
 
   describe('mount', () => {
     it('renders', () => {
-      expect(Wrapper().is('div')).toBe(true)
+      expect(Wrapper().element.tagName).toBe('DIV')
     })
 
     describe('given a piece of text', () => {

webapp/components/Editor/nodes/Embed.spec.js

@@ -42,7 +42,7 @@ describe('Embed.vue', () => {
         propsData.node = { attrs: { href: 'https://www.youtube.com/watch?v=qkdXAtO40Fo' } }
         const wrapper = Wrapper({ propsData })
         await wrapper.html()
-        expect(wrapper.contains('embed-component-stub')).toBe(true)
+        expect(wrapper.find('embed-component-stub').exists()).toBe(true)
       })
     })
 

webapp/components/Embed/EmbedComponent.spec.js

@@ -160,7 +160,7 @@ describe('EmbedComponent.vue', () => {
 
           describe('sets permanently', () => {
             beforeEach(() => {
-              wrapper.find('input[type=checkbox]').trigger('click')
+              wrapper.find('input[type=checkbox]').setChecked(true)
               wrapper.find('[data-test="play-now-button"]').trigger('click')
             })
 

webapp/components/EnterNonce/EnterNonce.spec.js

@@ -19,7 +19,9 @@ describe('EnterNonce ', () => {
   })
 
   describe('mount', () => {
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     Wrapper = () => {
       return mount(EnterNonce, {

webapp/components/Group/GroupForm.spec.js

@@ -1,9 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import GroupForm from './GroupForm.vue'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+const stubs = {
+  'nuxt-link': true,
+}
 
 const propsData = {
   update: false,
@@ -25,7 +27,7 @@ describe('GroupForm', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(GroupForm, { propsData, mocks, localVue })
+      return mount(GroupForm, { propsData, mocks, localVue, stubs })
     }
 
     beforeEach(() => {

webapp/components/Hashtag/Hashtag.spec.js

@@ -1,10 +1,12 @@
-import { config, shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 
 import Hashtag from './Hashtag'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+const stubs = {
+  'nuxt-link': true,
+}
 
 describe('Hashtag', () => {
   let id
@@ -15,6 +17,7 @@ describe('Hashtag', () => {
       propsData: {
         id,
       },
+      stubs,
     })
   }
 

webapp/components/HashtagsFilter/HashtagsFilter.spec.js

@@ -29,7 +29,7 @@ describe('HashtagsFilter.vue', () => {
 
       it('renders a card', () => {
         wrapper = Wrapper()
-        expect(wrapper.is('.base-card')).toBe(true)
+        expect(wrapper.classes('base-card')).toBe(true)
       })
 
       describe('click clear search button', () => {

webapp/components/InviteButton/InviteButton.spec.js

@@ -1,7 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import InviteButton from './InviteButton.vue'
 
-config.stubs['v-popover'] = '<span><slot /></span>'
+const stubs = {
+  'v-popover': {
+    template: '<span><slot /></span>',
+  },
+}
 
 describe('InviteButton.vue', () => {
   let wrapper
@@ -22,7 +26,7 @@ describe('InviteButton.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(InviteButton, { mocks, propsData })
+      return mount(InviteButton, { mocks, propsData, stubs })
     }
 
     beforeEach(() => {
@@ -30,12 +34,12 @@ describe('InviteButton.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.contains('.invite-button')).toBe(true)
+      expect(wrapper.find('.invite-button').exists()).toBe(true)
     })
 
     it('open popup', () => {
       wrapper.find('.base-button').trigger('click')
-      expect(wrapper.contains('.invite-button')).toBe(true)
+      expect(wrapper.find('.invite-button').exists()).toBe(true)
     })
 
     it('invite codes not available', async () => {

webapp/components/LocaleSwitch/LocaleSwitch.spec.js

@@ -1,11 +1,13 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 import LocaleSwitch from './LocaleSwitch.vue'
 import Vuex from 'vuex'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
+  'client-only': true,
+}
 
 describe('LocaleSwitch.vue', () => {
   let wrapper, mocks, computed, deutschLanguageItem, getters
@@ -65,7 +67,7 @@ describe('LocaleSwitch.vue', () => {
     const store = new Vuex.Store({
       getters,
     })
-    return mount(LocaleSwitch, { mocks, localVue, computed, store })
+    return mount(LocaleSwitch, { mocks, localVue, computed, store, stubs })
   }
 
   describe('with current user', () => {

webapp/components/LoginButton/LoginButton.spec.js

@@ -1,7 +1,10 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import LoginButton from './LoginButton.vue'
 
-config.stubs['v-popover'] = '<span><slot /></span>'
+const stubs = {
+  'v-popover': true,
+  'nuxt-link': true,
+}
 
 describe('LoginButton.vue', () => {
   let wrapper
@@ -22,7 +25,7 @@ describe('LoginButton.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(LoginButton, { mocks, propsData })
+      return mount(LoginButton, { mocks, propsData, stubs })
     }
 
     beforeEach(() => {
@@ -30,12 +33,12 @@ describe('LoginButton.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.contains('.login-button')).toBe(true)
+      expect(wrapper.find('.login-button').exists()).toBe(true)
     })
 
     it('open popup', () => {
       wrapper.find('.base-button').trigger('click')
-      expect(wrapper.contains('.login-button')).toBe(true)
+      expect(wrapper.find('.login-button').exists()).toBe(true)
     })
   })
 })

webapp/components/LoginForm/LoginForm.spec.js

@@ -2,15 +2,17 @@ import Vue from 'vue'
 import LoginForm from './LoginForm.vue'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(Styleguide)
 
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['locale-switch'] = '<span><slot /></span>'
+  'nuxt-link': true,
-config.stubs['client-only'] = '<span><slot /></span>'
+  'locale-switch': true,
+  'client-only': true,
+}
 
 const authUserMock = jest.fn().mockReturnValue({ activeCategories: [] })
 
@@ -46,7 +48,7 @@ describe('LoginForm', () => {
           error: jest.fn(),
         },
       }
-      return mount(LoginForm, { mocks, localVue, propsData, store })
+      return mount(LoginForm, { mocks, localVue, propsData, store, stubs })
     }
 
     describe('fill in email and password and submit', () => {

webapp/components/MasonryGrid/MasonryGridItem.spec.js

@@ -1,9 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import MasonryGridItem from './MasonryGridItem'
 
 const localVue = global.localVue
 
-config.stubs['ds-grid-item'] = '<span><slot /></span>'
+const stubs = {
+  'ds-grid-item': true,
+}
 
 describe('MasonryGridItem', () => {
   let wrapper
@@ -11,34 +13,34 @@ describe('MasonryGridItem', () => {
   describe('given an imageAspectRatio', () => {
     it('sets the initial rowSpan to 13 when the ratio is higher than 1.3', () => {
       const propsData = { imageAspectRatio: 2 }
-      wrapper = mount(MasonryGridItem, { localVue, propsData })
+      wrapper = mount(MasonryGridItem, { localVue, propsData, stubs })
 
       expect(wrapper.vm.rowSpan).toBe(13)
     })
 
     it('sets the initial rowSpan to 15 when the ratio is between 1.3 and 1', () => {
       const propsData = { imageAspectRatio: 1.1 }
-      wrapper = mount(MasonryGridItem, { localVue, propsData })
+      wrapper = mount(MasonryGridItem, { localVue, propsData, stubs })
 
       expect(wrapper.vm.rowSpan).toBe(15)
     })
 
     it('sets the initial rowSpan to 18 when the ratio is between 1 and 0.7', () => {
       const propsData = { imageAspectRatio: 0.7 }
-      wrapper = mount(MasonryGridItem, { localVue, propsData })
+      wrapper = mount(MasonryGridItem, { localVue, propsData, stubs })
 
       expect(wrapper.vm.rowSpan).toBe(18)
     })
 
     it('sets the initial rowSpan to 25 when the ratio is lower than 0.7', () => {
       const propsData = { imageAspectRatio: 0.3 }
-      wrapper = mount(MasonryGridItem, { localVue, propsData })
+      wrapper = mount(MasonryGridItem, { localVue, propsData, stubs })
       expect(wrapper.vm.rowSpan).toBe(25)
     })
 
     describe('given no aspect ratio', () => {
       it('sets the initial rowSpan to 8 when not given an imageAspectRatio', () => {
-        wrapper = mount(MasonryGridItem, { localVue })
+        wrapper = mount(MasonryGridItem, { localVue, stubs })
         expect(wrapper.vm.rowSpan).toBe(8)
       })
     })

webapp/components/Modal.spec.js

@@ -57,9 +57,9 @@ describe('Modal.vue', () => {
 
     it('initially empty', () => {
       wrapper = Wrapper()
-      expect(wrapper.contains(ConfirmModal)).toBe(false)
+      expect(wrapper.findComponent(ConfirmModal).exists()).toBe(false)
-      expect(wrapper.contains(DisableModal)).toBe(false)
+      expect(wrapper.findComponent(DisableModal).exists()).toBe(false)
-      expect(wrapper.contains(ReportModal)).toBe(false)
+      expect(wrapper.findComponent(ReportModal).exists()).toBe(false)
     })
 
     describe('store/modal holds data to disable', () => {
@@ -78,11 +78,11 @@ describe('Modal.vue', () => {
       })
 
       it('renders disable modal', () => {
-        expect(wrapper.contains(DisableModal)).toBe(true)
+        expect(wrapper.findComponent(DisableModal).exists()).toBe(true)
       })
 
       it('passes data to disable modal', () => {
-        expect(wrapper.find(DisableModal).props()).toEqual({
+        expect(wrapper.findComponent(DisableModal).props()).toEqual({
           type: 'contribution',
           name: 'some title',
           id: 'c456',
@@ -91,9 +91,9 @@ describe('Modal.vue', () => {
 
       describe('child component emits close', () => {
         it('turns empty', async () => {
-          wrapper.find(DisableModal).vm.$emit('close')
+          wrapper.findComponent(DisableModal).vm.$emit('close')
           await Vue.nextTick()
-          expect(wrapper.contains(DisableModal)).toBe(false)
+          expect(wrapper.findComponent(DisableModal).exists()).toBe(false)
         })
       })
 
@@ -109,7 +109,7 @@ describe('Modal.vue', () => {
             },
           }
           wrapper = Wrapper()
-          expect(wrapper.find(DisableModal).props()).toEqual({
+          expect(wrapper.findComponent(DisableModal).props()).toEqual({
             type: 'comment',
             name: 'Author name',
             id: 'c456',
@@ -124,7 +124,7 @@ describe('Modal.vue', () => {
             },
           }
           wrapper = Wrapper()
-          expect(wrapper.find(DisableModal).props()).toEqual({
+          expect(wrapper.findComponent(DisableModal).props()).toEqual({
             type: 'comment',
             name: '',
             id: 'c456',
@@ -142,7 +142,7 @@ describe('Modal.vue', () => {
             },
           }
           wrapper = Wrapper()
-          expect(wrapper.find(DisableModal).props()).toEqual({
+          expect(wrapper.findComponent(DisableModal).props()).toEqual({
             type: 'user',
             name: 'Username',
             id: 'u456',
@@ -160,7 +160,7 @@ describe('Modal.vue', () => {
             },
           }
           wrapper = Wrapper()
-          expect(wrapper.find(DisableModal).props()).toEqual({
+          expect(wrapper.findComponent(DisableModal).props()).toEqual({
             type: 'something',
             name: null,
             id: 's456',

webapp/components/Modal/ConfirmModal.spec.js

@@ -1,11 +1,13 @@
-import { config, shallowMount, mount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 
 import ConfirmModal from './ConfirmModal.vue'
 import { postMenuModalsData } from '~/components/utils/PostHelpers'
 
 const localVue = global.localVue
 
-config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+const stubs = {
+  'sweetalert-icon': true,
+}
 
 describe('ConfirmModal.vue', () => {
   let Wrapper
@@ -41,6 +43,7 @@ describe('ConfirmModal.vue', () => {
         propsData,
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -90,10 +93,13 @@ describe('ConfirmModal.vue', () => {
         propsData,
         mocks,
         localVue,
+        stubs,
       })
     }
 
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     describe('given post id', () => {
       beforeEach(() => {

webapp/components/Modal/DeleteUserModal.spec.js

@@ -1,9 +1,12 @@
-import { config, mount, shallowMount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import DeleteUserModal from './DeleteUserModal.vue'
 const localVue = global.localVue
-config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+const stubs = {
+  'sweetalert-icon': true,
+  'nuxt-link': true,
+}
 
 localVue.use(DeleteUserModal)
 
@@ -49,6 +52,7 @@ describe('DeleteUserModal.vue', () => {
         mocks,
         store,
         localVue,
+        stubs,
       })
     }
 
@@ -74,9 +78,12 @@ describe('DeleteUserModal.vue', () => {
         mocks,
         store,
         localVue,
+        stubs,
       })
     }
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     describe('given another user', () => {
       beforeEach(() => {

webapp/components/Modal/DisableModal.spec.js

@@ -102,7 +102,9 @@ describe('DisableModal.vue', () => {
         localVue,
       })
     }
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     describe('given id', () => {
       beforeEach(() => {

webapp/components/Modal/ReportModal.spec.js

@@ -1,10 +1,12 @@
-import { config, shallowMount, mount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import ReportModal from './ReportModal.vue'
 import Vue from 'vue'
 
 const localVue = global.localVue
 
-config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+const stubs = {
+  'sweetalert-icon': true,
+}
 
 describe('ReportModal.vue', () => {
   let wrapper
@@ -39,6 +41,7 @@ describe('ReportModal.vue', () => {
         propsData,
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -109,13 +112,16 @@ describe('ReportModal.vue', () => {
         propsData,
         mocks,
         localVue,
+        stubs,
       })
     }
 
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     it('renders', () => {
-      expect(Wrapper().is('div')).toBe(true)
+      expect(Wrapper().element.tagName).toBe('DIV')
     })
 
     describe('given id', () => {

webapp/components/Notification/Notification.spec.js

@@ -1,12 +1,10 @@
-import { config, mount, RouterLinkStub } from '@vue/test-utils'
+import { mount, RouterLinkStub } from '@vue/test-utils'
 import Notification from './Notification.vue'
 
 import Vuex from 'vuex'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
-
 describe('Notification', () => {
   let stubs
   let getters
@@ -20,6 +18,7 @@ describe('Notification', () => {
     }
     stubs = {
       NuxtLink: RouterLinkStub,
+      'client-only': true,
     }
     getters = {
       'auth/user': () => {

webapp/components/NotificationList/NotificationList.spec.js

@@ -1,4 +1,4 @@
-import { config, shallowMount, mount, RouterLinkStub } from '@vue/test-utils'
+import { shallowMount, mount, RouterLinkStub } from '@vue/test-utils'
 import NotificationList from './NotificationList'
 import Notification from '../Notification/Notification'
 import Vuex from 'vuex'
@@ -9,9 +9,6 @@ const localVue = global.localVue
 
 localVue.filter('truncate', (string) => string)
 
-config.stubs['client-only'] = '<span><slot /></span>'
-config.stubs['v-popover'] = '<span><slot /></span>'
-
 describe('NotificationList.vue', () => {
   let wrapper
   let mocks
@@ -33,6 +30,8 @@ describe('NotificationList.vue', () => {
     }
     stubs = {
       NuxtLink: RouterLinkStub,
+      'client-only': true,
+      'v-popover': true,
     }
     propsData = { notifications }
   })
@@ -44,6 +43,7 @@ describe('NotificationList.vue', () => {
         mocks,
         store,
         localVue,
+        stubs,
       })
     }
 
@@ -52,7 +52,7 @@ describe('NotificationList.vue', () => {
     })
 
     it('renders Notification.vue for each notification of the user', () => {
-      expect(wrapper.findAll(Notification)).toHaveLength(2)
+      expect(wrapper.findAllComponents(Notification)).toHaveLength(2)
     })
   })
 
@@ -97,7 +97,7 @@ describe('NotificationList.vue', () => {
     })
 
     it('renders Notification.vue zero times', () => {
-      expect(wrapper.findAll(Notification)).toHaveLength(0)
+      expect(wrapper.findAllComponents(Notification)).toHaveLength(0)
     })
   })
 })

webapp/components/NotificationMenu/NotificationMenu.spec.js

@@ -1,12 +1,10 @@
-import { config, mount, RouterLinkStub } from '@vue/test-utils'
+import { mount, RouterLinkStub } from '@vue/test-utils'
 import NotificationMenu from './NotificationMenu'
 
 const localVue = global.localVue
 
 localVue.filter('truncate', (string) => string)
 
-config.stubs.dropdown = '<span class="dropdown"><slot :toggleMenu="() => null" /></span>'
-
 describe('NotificationMenu.vue', () => {
   let wrapper
   let mocks
@@ -23,6 +21,8 @@ describe('NotificationMenu.vue', () => {
     }
     stubs = {
       NuxtLink: RouterLinkStub,
+      UserTeaser: true,
+      'client-only': true,
     }
   })
 
@@ -38,13 +38,13 @@ describe('NotificationMenu.vue', () => {
 
     it('renders as link without counter', () => {
       wrapper = Wrapper()
-      expect(wrapper.is('a.notifications-menu')).toBe(true)
+      expect(wrapper.classes('notifications-menu')).toBe(true)
       expect(() => wrapper.get('.count')).toThrow()
     })
 
     it('no dropdown is rendered', () => {
       wrapper = Wrapper()
-      expect(wrapper.contains('.dropdown')).toBe(false)
+      expect(wrapper.find('.dropdown').exists()).toBe(false)
     })
 
     describe('given only read notifications', () => {
@@ -73,13 +73,13 @@ describe('NotificationMenu.vue', () => {
 
       it('renders as link without counter', () => {
         wrapper = Wrapper()
-        expect(wrapper.is('a.notifications-menu')).toBe(true)
+        expect(wrapper.classes('notifications-menu')).toBe(true)
         expect(() => wrapper.get('.count')).toThrow()
       })
 
       it('no dropdown is rendered', () => {
         wrapper = Wrapper()
-        expect(wrapper.contains('.dropdown')).toBe(false)
+        expect(wrapper.find('.dropdown').exists()).toBe(false)
       })
     })
 
@@ -101,6 +101,14 @@ describe('NotificationMenu.vue', () => {
                     name: 'John Doe',
                   },
                 },
+                from: {
+                  title: 'Title',
+                  author: {
+                    id: 'reporter',
+                    slug: 'reporter',
+                    name: 'reporter',
+                  },
+                },
               },
               {
                 id: 'notification-42',
@@ -115,6 +123,14 @@ describe('NotificationMenu.vue', () => {
                     name: 'John Doe',
                   },
                 },
+                from: {
+                  title: 'Title',
+                  author: {
+                    id: 'reporter',
+                    slug: 'reporter',
+                    name: 'reporter',
+                  },
+                },
               },
               {
                 id: 'notification-43',
@@ -129,6 +145,14 @@ describe('NotificationMenu.vue', () => {
                     name: 'John Doe',
                   },
                 },
+                from: {
+                  title: 'Title',
+                  author: {
+                    id: 'reporter',
+                    slug: 'reporter',
+                    name: 'reporter',
+                  },
+                },
               },
             ],
           }

webapp/components/NotificationsTable/NotificationsTable.spec.js

@@ -1,4 +1,4 @@
-import { config, mount, RouterLinkStub } from '@vue/test-utils'
+import { mount, RouterLinkStub } from '@vue/test-utils'
 
 import Vuex from 'vuex'
 import NotificationsTable from './NotificationsTable'
@@ -8,8 +8,6 @@ const localVue = global.localVue
 
 localVue.filter('truncate', (string) => string)
 
-config.stubs['client-only'] = '<span><slot /></span>'
-
 describe('NotificationsTable.vue', () => {
   let wrapper, mocks, propsData, stubs
   const postNotification = notifications[0]
@@ -21,6 +19,7 @@ describe('NotificationsTable.vue', () => {
     }
     stubs = {
       NuxtLink: RouterLinkStub,
+      'client-only': true,
     }
     propsData = {}
   })

webapp/components/PageFooter/PageFooter.spec.js

@@ -1,10 +1,14 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import PageFooter from './PageFooter.vue'
 import linksDefault from '~/constants/links.js'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-link'] = '<span class="nuxt-link"><slot /></span>'
+const stubs = {
+  'nuxt-link': {
+    template: '<span class="nuxt-link"><slot /></span>',
+  },
+}
 
 describe('PageFooter.vue', () => {
   let mocks
@@ -21,7 +25,7 @@ describe('PageFooter.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(PageFooter, { mocks, localVue })
+      return mount(PageFooter, { mocks, localVue, stubs })
     }
 
     describe('links.js', () => {

webapp/components/Password/Change.spec.js

@@ -90,9 +90,8 @@ describe('ChangePassword.vue', () => {
       })
 
       describe('submit form', () => {
-        beforeEach(async (done) => {
+        beforeEach(async () => {
           await wrapper.find('form').trigger('submit')
-          done()
         })
 
         it('calls changePassword mutation', () => {

webapp/components/PasswordReset/ChangePassword.spec.js

@@ -1,9 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import ChangePassword from './ChangePassword'
 
 const localVue = global.localVue
 
-config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+const stubs = {
+  'sweetalert-icon': true,
+}
 
 describe('ChangePassword ', () => {
   let wrapper
@@ -27,13 +29,16 @@ describe('ChangePassword ', () => {
   })
 
   describe('mount', () => {
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     Wrapper = () => {
       return mount(ChangePassword, {
         mocks,
         propsData,
         localVue,
+        stubs,
       })
     }
 

webapp/components/PasswordReset/Request.spec.js

@@ -1,12 +1,8 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Request from './Request'
 
 const localVue = global.localVue
 
-config.stubs['sweetalert-icon'] = '<span><slot /></span>'
-config.stubs['client-only'] = '<span><slot /></span>'
-config.stubs['nuxt-link'] = '<span><slot /></span>'
-
 describe('Request', () => {
   let wrapper, Wrapper, mocks, stubs
 
@@ -26,12 +22,17 @@ describe('Request', () => {
       },
     }
     stubs = {
-      LocaleSwitch: "<div class='stub'></div>",
+      LocaleSwitch: true,
+      'sweetalert-icon': true,
+      'client-only': true,
+      'nuxt-link': true,
     }
   })
 
   describe('mount', () => {
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     Wrapper = () => {
       return mount(Request, {

webapp/components/PostTeaser/PostTeaser.spec.js

@@ -1,4 +1,4 @@
-import { config, shallowMount, mount, RouterLinkStub } from '@vue/test-utils'
+import { shallowMount, mount, RouterLinkStub } from '@vue/test-utils'
 
 import Vuex from 'vuex'
 
@@ -6,9 +6,6 @@ import PostTeaser from './PostTeaser.vue'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
-config.stubs['v-popover'] = '<span><slot /></span>'
-
 describe('PostTeaser', () => {
   let store
   let stubs
@@ -35,6 +32,8 @@ describe('PostTeaser', () => {
     }
     stubs = {
       NuxtLink: RouterLinkStub,
+      'client-only': true,
+      'v-popover': true,
     }
     mocks = {
       $t: jest.fn(),
@@ -77,7 +76,9 @@ describe('PostTeaser', () => {
       spy.mockReset()
     })
 
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     describe('test Post callbacks', () => {
       beforeEach(() => {

webapp/components/Registration/Signup.spec.js

@@ -1,10 +1,12 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Signup, { SignupMutation } from './Signup'
 
 const localVue = global.localVue
 
-config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'sweetalert-icon': true,
+  'nuxt-link': true,
+}
 
 describe('Signup', () => {
   let wrapper
@@ -28,13 +30,16 @@ describe('Signup', () => {
   })
 
   describe('mount', () => {
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     Wrapper = () => {
       return mount(Signup, {
         mocks,
         propsData,
         localVue,
+        stubs,
       })
     }
 

webapp/components/RelativeDateTime/spec.js

@@ -42,7 +42,7 @@ describe('RelativeDateTime', () => {
     })
 
     it('renders', () => {
-      expect(Wrapper().is('span')).toBe(true)
+      expect(Wrapper().element.tagName).toBe('SPAN')
     })
 
     describe("locale == 'en'", () => {

webapp/components/ReleaseModal/ReleaseModal.spec.js

@@ -100,7 +100,9 @@ describe('ReleaseModal.vue', () => {
       })
     }
 
-    beforeEach(jest.useFakeTimers)
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
 
     describe('given id', () => {
       beforeEach(() => {

webapp/components/SocialMedia/SocialMedia.spec.js

@@ -1,8 +1,10 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import SocialMedia from './SocialMedia.vue'
 
-config.stubs['ds-space'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['ds-text'] = '<span><slot /></span>'
+  'ds-space': true,
+  'ds-text': true,
+}
 
 describe('SocialMedia.vue', () => {
   let propsData
@@ -18,7 +20,7 @@ describe('SocialMedia.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(SocialMedia, { propsData, mocks })
+      return mount(SocialMedia, { propsData, mocks, stubs })
     }
 
     describe('socialMedia card title', () => {

webapp/components/_new/features/SearchResults/SearchResults.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import SearchResults from './SearchResults'
 import helpers from '~/storybook/helpers'
@@ -9,8 +9,10 @@ const localVue = global.localVue
 
 localVue.directive('scrollTo', jest.fn())
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'client-only': true,
+  'nuxt-link': true,
+}
 
 describe('SearchResults', () => {
   let mocks, getters, propsData, wrapper
@@ -18,7 +20,7 @@ describe('SearchResults', () => {
     const store = new Vuex.Store({
       getters,
     })
-    return mount(SearchResults, { mocks, localVue, propsData, store })
+    return mount(SearchResults, { mocks, localVue, propsData, store, stubs })
   }
 
   beforeEach(() => {

webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js

@@ -19,7 +19,7 @@ describe('CounterIcon.vue', () => {
     })
 
     it('renders the icon', () => {
-      expect(wrapper.find(BaseIcon).exists()).toBe(true)
+      expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
     })
 
     it('renders the count', () => {
@@ -35,7 +35,7 @@ describe('CounterIcon.vue', () => {
     })
 
     it('renders the icon', () => {
-      expect(wrapper.find(BaseIcon).exists()).toBe(true)
+      expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
     })
 
     it('renders the capped count with a plus', () => {

webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js

@@ -20,7 +20,7 @@ describe('ProfileAvatar', () => {
   })
 
   it('renders an icon', () => {
-    expect(wrapper.find(BaseIcon).exists()).toBe(true)
+    expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
   })
 
   describe('given a profile', () => {
@@ -38,7 +38,7 @@ describe('ProfileAvatar', () => {
         it('renders an icon', () => {
           propsData = { profile: { name: null } }
           wrapper = Wrapper()
-          expect(wrapper.find(BaseIcon).exists()).toBe(true)
+          expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
         })
       })
 
@@ -46,7 +46,7 @@ describe('ProfileAvatar', () => {
         it('renders an icon', () => {
           propsData = { profile: { name: 'Anonymous' } }
           wrapper = Wrapper()
-          expect(wrapper.find(BaseIcon).exists()).toBe(true)
+          expect(wrapper.findComponent(BaseIcon).exists()).toBe(true)
         })
       })
 

webapp/components/_new/generic/TabNavigation/TabNavigation.spec.js

@@ -1,14 +1,16 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import TabNavigation from './TabNavigation'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
+  'client-only': true,
+}
 
 describe('TabNavigation', () => {
   let mocks, propsData, wrapper
   const Wrapper = () => {
-    return mount(TabNavigation, { mocks, localVue, propsData })
+    return mount(TabNavigation, { mocks, localVue, propsData, stubs })
   }
 
   beforeEach(() => {

webapp/components/features/FiledReportsTable/FiledReportsTable.spec.js

@@ -1,4 +1,4 @@
-import { config, mount, RouterLinkStub } from '@vue/test-utils'
+import { mount, RouterLinkStub } from '@vue/test-utils'
 import Vuex from 'vuex'
 import FiledReportsTable from './FiledReportsTable'
 import { reports } from '~/components/features/ReportList/ReportList.story.js'
@@ -7,8 +7,6 @@ const localVue = global.localVue
 
 localVue.filter('truncate', (string) => string)
 
-config.stubs['client-only'] = '<span><slot /></span>'
-
 describe('FiledReportsTable.vue', () => {
   let wrapper, mocks, propsData, stubs, filed
 
@@ -18,6 +16,7 @@ describe('FiledReportsTable.vue', () => {
     }
     stubs = {
       NuxtLink: RouterLinkStub,
+      'client-only': true,
     }
     propsData = {}
   })

webapp/components/features/ProfileList/FollowList.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 
 import helpers from '~/storybook/helpers'
@@ -6,9 +6,11 @@ import FollowList from './FollowList.vue'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['ds-space'] = '<span><slot /></span>'
+  'client-only': true,
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'ds-space': true,
+  'nuxt-link': true,
+}
 
 const user = {
   ...helpers.fakeUser()[0],
@@ -45,6 +47,7 @@ describe('FollowList.vue', () => {
         $t: jest.fn((str) => str),
       },
       localVue,
+      stubs,
     })
 
   beforeAll(() => {
@@ -138,11 +141,11 @@ describe('FollowList.vue', () => {
         })
 
         it('renders the user-teasers as an overflowing list', () => {
-          expect(wrapper.find('.--overflow').is('ul')).toBe(true)
+          expect(wrapper.find('.--overflow').element.tagName).toBe('UL')
         })
 
         it('renders a filter text input', () => {
-          expect(wrapper.find('[name="followingFilter"]').is('input')).toBe(true)
+          expect(wrapper.find('[name="followingFilter"]').element.tagName).toBe('INPUT')
         })
       })
     })

webapp/components/features/ReportList/ReportList.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import ReportList from './ReportList'
 import { reports } from './ReportList.story'
@@ -7,8 +7,10 @@ import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'client-only': true,
+  'nuxt-link': true,
+}
 
 describe('ReportList', () => {
   let mocks, mutations, getters, wrapper
@@ -45,7 +47,7 @@ describe('ReportList', () => {
         mutations,
         getters,
       })
-      return mount(ReportList, { mocks, localVue, store })
+      return mount(ReportList, { mocks, localVue, store, stubs })
     }
 
     describe('renders children components', () => {
@@ -54,11 +56,11 @@ describe('ReportList', () => {
       })
 
       it('renders DropdownFilter', () => {
-        expect(wrapper.find(DropdownFilter).exists()).toBe(true)
+        expect(wrapper.findComponent(DropdownFilter).exists()).toBe(true)
       })
 
       it('renders ReportsTable', () => {
-        expect(wrapper.find(ReportsTable).exists()).toBe(true)
+        expect(wrapper.findComponent(ReportsTable).exists()).toBe(true)
       })
     })
 
@@ -66,7 +68,7 @@ describe('ReportList', () => {
       beforeEach(async () => {
         wrapper = Wrapper()
         wrapper.setData({ reports })
-        wrapper.find(ReportsTable).vm.$emit('confirm', reports[0])
+        wrapper.findComponent(ReportsTable).vm.$emit('confirm', reports[0])
       })
 
       it('calls modal/SET_OPEN', () => {

webapp/components/features/ReportRow/ReportRow.spec.js

@@ -1,4 +1,4 @@
-import { config, mount, RouterLinkStub } from '@vue/test-utils'
+import { mount, RouterLinkStub } from '@vue/test-utils'
 import Vuex from 'vuex'
 import ReportRow from './ReportRow.vue'
 import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
@@ -6,8 +6,6 @@ import { reports } from '~/components/features/ReportList/ReportList.story.js'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
-
 describe('ReportRow', () => {
   let propsData, mocks, stubs, getters, wrapper
 
@@ -18,6 +16,7 @@ describe('ReportRow', () => {
     }
     stubs = {
       NuxtLink: RouterLinkStub,
+      'client-only': true,
     }
     getters = {
       'auth/user': () => {
@@ -85,7 +84,9 @@ describe('ReportRow', () => {
           wrapper = Wrapper()
         })
         it('renders the disabled icon', () => {
-          expect(wrapper.find('.status-line').find(BaseIcon).props().name).toEqual('eye-slash')
+          expect(wrapper.find('.status-line').findComponent(BaseIcon).props().name).toEqual(
+            'eye-slash',
+          )
         })
 
         it('renders its current status', () => {
@@ -99,7 +100,7 @@ describe('ReportRow', () => {
           wrapper = Wrapper()
         })
         it('renders the enabled icon', () => {
-          expect(wrapper.find('.status-line').find(BaseIcon).props().name).toEqual('eye')
+          expect(wrapper.find('.status-line').findComponent(BaseIcon).props().name).toEqual('eye')
         })
 
         it('renders its current status', () => {
@@ -120,7 +121,7 @@ describe('ReportRow', () => {
       })
 
       it('renders a comments icon', () => {
-        const commentsIcon = wrapper.find(BaseIcon).props().name
+        const commentsIcon = wrapper.findComponent(BaseIcon).props().name
         expect(commentsIcon).toEqual('comments')
       })
 
@@ -142,7 +143,7 @@ describe('ReportRow', () => {
       })
 
       it('renders a bookmark icon', () => {
-        const postIcon = wrapper.find(BaseIcon).props().name
+        const postIcon = wrapper.findComponent(BaseIcon).props().name
         expect(postIcon).toEqual('bookmark')
       })
 
@@ -164,7 +165,7 @@ describe('ReportRow', () => {
       })
 
       it('renders a user icon', () => {
-        const userIcon = wrapper.find(BaseIcon).props().name
+        const userIcon = wrapper.findComponent(BaseIcon).props().name
         expect(userIcon).toEqual('user')
       })
 

webapp/components/features/ReportsTable/ReportsTable.spec.js

@@ -1,12 +1,14 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import ReportsTable from './ReportsTable.vue'
 import { reports } from '~/components/features/ReportList/ReportList.story.js'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'client-only': true,
+  'nuxt-link': true,
+}
 
 describe('ReportsTable', () => {
   let propsData, mocks, getters, wrapper, reportsTable
@@ -29,7 +31,7 @@ describe('ReportsTable', () => {
       const store = new Vuex.Store({
         getters,
       })
-      return mount(ReportsTable, { propsData, mocks, localVue, store })
+      return mount(ReportsTable, { propsData, mocks, localVue, store, stubs })
     }
 
     describe('given no reports', () => {

webapp/components/features/SearchField/SearchField.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import SearchField from './SearchField.vue'
 import SearchableInput from '~/components/generic/SearchableInput/SearchableInput'
@@ -7,7 +7,10 @@ const localVue = global.localVue
 
 localVue.filter('truncate', () => 'truncated string')
 localVue.filter('dateTime', () => Date.now)
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+const stubs = {
+  'nuxt-link': true,
+}
 
 describe('SearchField.vue', () => {
   let mocks, wrapper, getters
@@ -26,14 +29,14 @@ describe('SearchField.vue', () => {
     const store = new Vuex.Store({
       getters,
     })
-    return mount(SearchField, { mocks, localVue, store })
+    return mount(SearchField, { mocks, localVue, store, stubs })
   }
 
   describe('mount', () => {
     describe('Emitted events', () => {
       let searchableInputComponent
       beforeEach(() => {
-        searchableInputComponent = wrapper.find(SearchableInput)
+        searchableInputComponent = wrapper.findComponent(SearchableInput)
       })
 
       describe('query event', () => {

webapp/components/generic/SearchPost/SearchPost.spec.js

@@ -37,11 +37,11 @@ describe('SearchPost.vue', () => {
     })
 
     it('renders post commentsCount', () => {
-      expect(counts.text()).toContain(propsData.option.commentsCount)
+      expect(counts.text()).toContain(propsData.option.commentsCount.toString())
     })
 
     it('renders post shoutedCount', () => {
-      expect(counts.text()).toContain(propsData.option.shoutedCount)
+      expect(counts.text()).toContain(propsData.option.shoutedCount.toString())
     })
 
     it('renders post author', () => {

webapp/components/generic/SearchableInput/SearchableInput.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Vue from 'vue'
 import SearchableInput from './SearchableInput'
@@ -8,7 +8,10 @@ const localVue = global.localVue
 
 localVue.filter('truncate', () => 'truncated string')
 localVue.filter('dateTime', () => Date.now)
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+const stubs = {
+  'nuxt-link': true,
+}
 
 describe('SearchableInput.vue', () => {
   let mocks, propsData, getters, wrapper
@@ -28,7 +31,7 @@ describe('SearchableInput.vue', () => {
     const store = new Vuex.Store({
       getters,
     })
-    return mount(SearchableInput, { mocks, localVue, propsData, store })
+    return mount(SearchableInput, { mocks, localVue, propsData, store, stubs })
   }
 
   describe('mount', () => {

webapp/jest.config.js

@@ -22,12 +22,14 @@ module.exports = {
     '^.+\\.js$': 'babel-jest',
   },
   testMatch: ['**/?(*.)+(spec|test).js?(x)'],
-  modulePathIgnorePatterns: ['<rootDir>/build/'],
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
   moduleNameMapper: {
     '\\.(svg)$': '<rootDir>/test/fileMock.js',
     '\\.(css|less)$': 'identity-obj-proxy',
+    '@mapbox/mapbox-gl-geocoder': 'identity-obj-proxy',
     '^@/(.*)$': '<rootDir>/src/$1',
     '^~/(.*)$': '<rootDir>/$1',
   },
   moduleFileExtensions: ['js', 'json', 'vue'],
+  testEnvironment: 'jest-environment-jsdom',
 }

webapp/layouts/basic.spec.js

@@ -1,10 +1,14 @@
 import Vuex from 'vuex'
-import { config, shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Basic from './basic.vue'
 
 const localVue = global.localVue
 
-config.stubs.nuxt = '<span><slot /></span>'
+const stubs = {
+  nuxt: {
+    template: '<span><slot /></span>',
+  },
+}
 
 describe('basic.vue', () => {
   let wrapper
@@ -28,6 +32,7 @@ describe('basic.vue', () => {
         store,
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -36,7 +41,7 @@ describe('basic.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.layout-blank')).toBe(true)
+      expect(wrapper.classes('layout-blank')).toBe(true)
     })
   })
 })

webapp/layouts/blank.spec.js

@@ -1,9 +1,13 @@
-import { config, shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Blank from './blank.vue'
 
 const localVue = global.localVue
 
-config.stubs.nuxt = '<span><slot /></span>'
+const stubs = {
+  nuxt: {
+    template: '<span><slot /></span>',
+  },
+}
 
 describe('blank.vue', () => {
   let wrapper
@@ -20,6 +24,7 @@ describe('blank.vue', () => {
       return shallowMount(Blank, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -28,7 +33,7 @@ describe('blank.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.layout-blank')).toBe(true)
+      expect(wrapper.classes('layout-blank')).toBe(true)
     })
   })
 })

webapp/layouts/default.spec.js

@@ -1,13 +1,21 @@
 import Vuex from 'vuex'
-import { config, shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Default from './default.vue'
 
 const localVue = global.localVue
 localVue.directive('scrollTo', jest.fn())
 
-config.stubs.nuxt = '<span><slot /></span>'
+const stubs = {
-config.stubs['client-only'] = '<span><slot /></span>'
+  nuxt: {
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+    template: '<span><slot /></span>',
+  },
+  'client-only': {
+    template: '<span><slot /></span>',
+  },
+  'nuxt-link': {
+    template: '<span><slot /></span>',
+  },
+}
 
 describe('default.vue', () => {
   let wrapper
@@ -38,6 +46,7 @@ describe('default.vue', () => {
         store,
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -46,7 +55,7 @@ describe('default.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.layout-default')).toBe(true)
+      expect(wrapper.classes('layout-default')).toBe(true)
     })
   })
 })

webapp/layouts/error.spec.js

@@ -1,9 +1,13 @@
-import { config, shallowMount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import Error from './error.vue'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+const stubs = {
+  'nuxt-link': {
+    template: '<span><slot /></span>',
+  },
+}
 
 describe('error.vue', () => {
   let mocks, wrapper
@@ -15,7 +19,7 @@ describe('error.vue', () => {
   })
 
   const Wrapper = (propsData = {}) => {
-    return shallowMount(Error, { mocks, propsData, localVue })
+    return shallowMount(Error, { mocks, propsData, localVue, stubs })
   }
 
   describe('shallowMount', () => {

webapp/package.json

@@ -67,7 +67,7 @@
   "devDependencies": {
     "@babel/core": "~7.12.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "~7.9.0",
+    "@babel/preset-env": "^7.20.2",
     "@faker-js/faker": "5.1.0",
     "@nuxtjs/composition-api": "0.32.0",
     "@storybook/addon-a11y": "^6.3.6",
@@ -77,11 +77,11 @@
     "@vue/cli-shared-utils": "~4.3.1",
     "@vue/eslint-config-prettier": "~6.0.0",
     "@vue/server-test-utils": "~1.0.0-beta.31",
-    "@vue/test-utils": "~1.0.0-beta.31",
+    "@vue/test-utils": "1.3.4",
     "async-validator": "^3.2.4",
     "babel-core": "~7.0.0-bridge.0",
     "babel-eslint": "~10.1.0",
-    "babel-jest": "~25.3.0",
+    "babel-jest": "29.4",
     "babel-loader": "~8.1.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "~2.0.2",
@@ -100,7 +100,8 @@
     "eslint-plugin-vue": "~6.2.2",
     "flush-promises": "^1.0.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "~26.6.3",
+    "jest": "29.4",
+    "jest-environment-jsdom": "^29.4.2",
     "mutation-observer": "^1.0.3",
     "prettier": "~2.7.1",
     "sass-loader": "~10.1.1",

webapp/pages/admin.spec.js

@@ -1,7 +1,9 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import admin from './admin.vue'
 
-config.stubs['nuxt-child'] = '<span><slot /></span>'
+const stubs = {
+  'nuxt-child': true,
+}
 
 const localVue = global.localVue
 
@@ -20,6 +22,7 @@ describe('admin.vue', () => {
       return mount(admin, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -28,7 +31,7 @@ describe('admin.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
   })
 })

webapp/pages/admin/categories.spec.js

@@ -26,7 +26,7 @@ describe('categories.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
   })
 })

webapp/pages/admin/donations.spec.js

@@ -57,7 +57,7 @@ describe('donations.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
 
     describe('displays', () => {
@@ -88,24 +88,18 @@ describe('donations.vue', () => {
 
     describe('form component click', () => {
       it('on #showDonations checkbox changes "showDonations" to true', async () => {
-        // starts with false
+        await wrapper.find('#showDonations').setChecked(true)
-        wrapper.find('#showDonations').trigger('click') // set to true
-        await wrapper.vm.$nextTick()
         expect(wrapper.vm.showDonations).toBe(true)
       })
 
       it('on #showDonations checkbox twice changes "showDonations" back to false', async () => {
-        // starts with false
+        await wrapper.find('#showDonations').setChecked(true)
-        wrapper.find('#showDonations').trigger('click') // set to true
+        await wrapper.find('#showDonations').setChecked(false)
-        wrapper.find('#showDonations').trigger('click') // set to false
-        await wrapper.vm.$nextTick()
         expect(wrapper.vm.showDonations).toBe(false)
       })
 
       it.skip('on donations-goal and enter value XXX', async () => {
-        wrapper.find('#donations-goal').setValue('20000')
+        await wrapper.find('#donations-goal').setValue('20000')
-        await wrapper.vm.$nextTick()
-        // console.log(wrapper.find('#donations-goal').element.value)
         expect(wrapper.vm.formData.goal).toBe('20000')
       })
     })
@@ -141,7 +135,7 @@ describe('donations.vue', () => {
         })
 
         it('calls mutation with input values once', async () => {
-          wrapper.find('#showDonations').trigger('click') // set to true
+          wrapper.find('#showDonations').setChecked(true)
           await wrapper.vm.$nextTick()
           wrapper.find('#donations-goal').setValue('20000')
           await wrapper.vm.$nextTick()

webapp/pages/admin/hashtags.spec.js

@@ -26,7 +26,7 @@ describe('hashtags.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
   })
 })

webapp/pages/admin/invite.spec.js

@@ -29,7 +29,7 @@ describe('invite.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.ds-section')).toBe(true)
+      expect(wrapper.classes('ds-section')).toBe(true)
     })
   })
 })

webapp/pages/admin/notifications.spec.js

@@ -29,7 +29,7 @@ describe('notifications.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
   })
 })

webapp/pages/admin/organizations.spec.js

@@ -29,7 +29,7 @@ describe('organizations.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
   })
 })

webapp/pages/admin/pages.spec.js

@@ -29,7 +29,7 @@ describe('pages.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
   })
 })

webapp/pages/admin/settings.spec.js

@@ -29,7 +29,7 @@ describe('settings.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
   })
 })

webapp/pages/admin/users.spec.js

@@ -1,9 +1,12 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Users from './users.vue'
 
 const localVue = global.localVue
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+const stubs = {
+  'nuxt-link': true,
+}
 
 describe('Users', () => {
   let wrapper
@@ -49,12 +52,13 @@ describe('Users', () => {
         mocks,
         localVue,
         store,
+        stubs,
       })
     }
 
     it('renders', () => {
       wrapper = Wrapper()
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     describe('search', () => {

webapp/pages/code-of-conduct.spec.js

@@ -33,7 +33,7 @@ describe('code-of-conduct.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBeTruthy()
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('has correct <head> content', () => {

webapp/pages/data-privacy.spec.js

@@ -33,7 +33,7 @@ describe('data-privacy.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBeTruthy()
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('has correct <head> content', () => {

webapp/pages/donate.spec.js

@@ -37,7 +37,7 @@ describe('donate.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBeTruthy()
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('has correct <head> content', () => {

webapp/pages/faq.spec.js

@@ -33,7 +33,7 @@ describe('faq.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBeTruthy()
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('has correct <head> content', () => {

webapp/pages/group/_id.spec.js

@@ -1,9 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import _id from './_id.vue'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-child'] = '<span class="nuxt-child"><slot /></span>'
+const stubs = {
+  'nuxt-child': true,
+}
 
 describe('Group profile _id.vue', () => {
   let wrapper
@@ -19,6 +21,7 @@ describe('Group profile _id.vue', () => {
       return mount(_id, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -27,7 +30,7 @@ describe('Group profile _id.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.findAll('.nuxt-child')).toHaveLength(1)
+      expect(wrapper.findComponent({ name: 'nuxt-child' }).exists()).toBe(true)
     })
   })
 })

webapp/pages/group/_id/_slug.spec.js

@@ -1,15 +1,18 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import GroupProfileSlug from './_slug.vue'
 
 const localVue = global.localVue
 
 localVue.filter('date', (d) => d)
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['v-popover'] = '<span><slot /></span>'
+  'client-only': true,
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'v-popover': true,
-config.stubs['infinite-loading'] = '<span><slot /></span>'
+  'nuxt-link': true,
-config.stubs['follow-list'] = '<span><slot /></span>'
+  'router-link': true,
+  'infinite-loading': true,
+  'follow-list': true,
+}
 
 describe('GroupProfileSlug', () => {
   let wrapper
@@ -201,6 +204,7 @@ describe('GroupProfileSlug', () => {
         mocks,
         localVue,
         data,
+        stubs,
       })
     }
 

webapp/pages/groups.spec.js

@@ -1,10 +1,12 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import groups from './groups.vue'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-link'] = '<span class="nuxt-link"><slot /></span>'
+const stubs = {
-config.stubs['client-only'] = '<span class="client-only"><slot /></span>'
+  'nuxt-link': true,
+  'client-only': true,
+}
 
 describe('groups', () => {
   let wrapper
@@ -21,6 +23,7 @@ describe('groups', () => {
       return mount(groups, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -29,7 +32,7 @@ describe('groups', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
   })
 })

webapp/pages/imprint.spec.js

@@ -37,7 +37,7 @@ describe('imprint.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBeTruthy()
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('has correct <head> content', () => {

webapp/pages/index.spec.js

@@ -1,14 +1,16 @@
-import { config, shallowMount, mount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import PostIndex from './index.vue'
 import Vuex from 'vuex'
 import HashtagsFilter from '~/components/HashtagsFilter/HashtagsFilter'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['router-link'] = '<span><slot /></span>'
+  'client-only': true,
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'router-link': true,
-config.stubs['infinite-loading'] = '<span><slot /></span>'
+  'nuxt-link': true,
+  'infinite-loading': true,
+}
 
 describe('PostIndex', () => {
   let wrapper
@@ -95,7 +97,7 @@ describe('PostIndex', () => {
     it('clears the search when the filter menu emits clearSearch', () => {
       mocks.$route.query.hashtag = '#samplehashtag'
       wrapper = Wrapper()
-      wrapper.find(HashtagsFilter).vm.$emit('clearSearch')
+      wrapper.findComponent(HashtagsFilter).vm.$emit('clearSearch')
       expect(wrapper.vm.hashtag).toBeNull()
     })
 
@@ -123,6 +125,7 @@ describe('PostIndex', () => {
         store,
         mocks,
         localVue,
+        stubs,
       })
     }
 

webapp/pages/login.spec.js

@@ -1,11 +1,13 @@
 import Vuex from 'vuex'
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import login from './login.vue'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span class="client-only"><slot /></span>'
+const stubs = {
-config.stubs['nuxt-link'] = '<span class="nuxt-link"><slot /></span>'
+  'client-only': true,
+  'nuxt-link': true,
+}
 
 describe('Login.vue', () => {
   let store
@@ -50,6 +52,7 @@ describe('Login.vue', () => {
         store,
         mocks,
         localVue,
+        stubs,
       })
     }
 

webapp/pages/logout.spec.js

@@ -32,7 +32,7 @@ describe('logout.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('logs out and redirects to login', () => {

webapp/pages/map.spec.js

@@ -4,6 +4,11 @@ import { mount } from '@vue/test-utils'
 import VueMeta from 'vue-meta'
 import Vuex from 'vuex'
 import Map from './map'
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
+
+jest.mock('@mapbox/mapbox-gl-geocoder', () => {
+  return jest.fn().mockImplementation(jest.fn())
+})
 
 jest.mock('mapbox-gl', () => {
   return {
@@ -68,6 +73,7 @@ describe('map', () => {
   let mocks
 
   beforeEach(() => {
+    MapboxGeocoder.mockClear()
     mocks = {
       $t: (t) => t,
       $env: {
@@ -95,7 +101,7 @@ describe('map', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBeTruthy()
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('has correct <head> content', () => {

webapp/pages/moderation.spec.js

@@ -1,7 +1,9 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import moderation from './moderation.vue'
 
-config.stubs['nuxt-child'] = '<span><slot /></span>'
+const stubs = {
+  'nuxt-child': true,
+}
 
 const localVue = global.localVue
 
@@ -20,6 +22,7 @@ describe('moderation.vue', () => {
       return mount(moderation, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -28,7 +31,7 @@ describe('moderation.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
   })
 })

webapp/pages/moderation/index.spec.js

@@ -1,8 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Moderation from './index.vue'
 
 const localVue = global.localVue
-config.stubs['client-only'] = '<span><slot /></span>'
+
+const stubs = {
+  'client-only': true,
+}
 
 describe('moderation/index.vue', () => {
   let wrapper
@@ -16,7 +19,7 @@ describe('moderation/index.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(Moderation, { mocks, localVue })
+      return mount(Moderation, { mocks, localVue, stubs })
     }
 
     beforeEach(() => {
@@ -24,7 +27,7 @@ describe('moderation/index.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
   })
 })

webapp/pages/notifications/index.spec.js

@@ -1,4 +1,4 @@
-import { config, shallowMount, mount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import NotificationsPage from './index.vue'
 
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
@@ -7,7 +7,9 @@ import PaginationButtons from '~/components/_new/generic/PaginationButtons/Pagin
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
+  'client-only': true,
+}
 
 describe('PostIndex', () => {
   let wrapper, Wrapper, mocks, propsData
@@ -42,6 +44,7 @@ describe('PostIndex', () => {
           mocks,
           localVue,
           propsData,
+          stubs,
         })
       }
       wrapper = Wrapper()
@@ -67,6 +70,7 @@ describe('PostIndex', () => {
           mocks,
           localVue,
           propsData,
+          stubs,
         })
       }
     })
@@ -79,7 +83,7 @@ describe('PostIndex', () => {
           { label: 'Unread', value: false },
         ]
         wrapper = Wrapper()
-        wrapper.find(DropdownFilter).vm.$emit('filter', propsData.filterOptions[1])
+        wrapper.findComponent(DropdownFilter).vm.$emit('filter', propsData.filterOptions[1])
       })
 
       it('sets `notificationRead` to value of received option', () => {
@@ -98,7 +102,9 @@ describe('PostIndex', () => {
     describe('markNotificationAsRead', () => {
       beforeEach(() => {
         wrapper = Wrapper()
-        wrapper.find(NotificationsTable).vm.$emit('markNotificationAsRead', 'notificationSourceId')
+        wrapper
+          .findComponent(NotificationsTable)
+          .vm.$emit('markNotificationAsRead', 'notificationSourceId')
       })
 
       it('calls markNotificationAsRead mutation', () => {
@@ -112,7 +118,7 @@ describe('PostIndex', () => {
           mocks.$apollo.mutate = jest.fn().mockRejectedValueOnce({ message: 'Some error message' })
           wrapper = Wrapper()
           wrapper
-            .find(NotificationsTable)
+            .findComponent(NotificationsTable)
             .vm.$emit('markNotificationAsRead', 'notificationSourceId')
         })
 
@@ -129,7 +135,7 @@ describe('PostIndex', () => {
 
       describe('next: given a user is on the first page', () => {
         it('adds offset to pageSize to skip first x notifications and display next page', () => {
-          wrapper.find(PaginationButtons).vm.$emit('next')
+          wrapper.findComponent(PaginationButtons).vm.$emit('next')
           expect(wrapper.vm.offset).toEqual(12)
         })
       })
@@ -137,7 +143,7 @@ describe('PostIndex', () => {
       describe('back: given a user is on the third page', () => {
         it('sets offset when back is emitted', () => {
           wrapper.setData({ offset: 24 })
-          wrapper.find(PaginationButtons).vm.$emit('back')
+          wrapper.findComponent(PaginationButtons).vm.$emit('back')
           expect(wrapper.vm.offset).toEqual(12)
         })
       })

webapp/pages/organization.spec.js

@@ -37,7 +37,7 @@ describe('organization.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBeTruthy()
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('has correct <head> content', () => {

webapp/pages/password-reset.spec.js

@@ -1,11 +1,13 @@
 import Vuex from 'vuex'
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import PasswordReset from './password-reset.vue'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span class="client-only"><slot /></span>'
+const stubs = {
-config.stubs['nuxt-child'] = '<span class="nuxt-child"><slot /></span>'
+  'client-only': true,
+  'nuxt-child': true,
+}
 
 describe('password-reset.vue', () => {
   let wrapper
@@ -47,12 +49,13 @@ describe('password-reset.vue', () => {
       return mount(PasswordReset, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
     it('renders', async () => {
       wrapper = await Wrapper()
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     it('renders with asyncData and not loggedIn', async () => {

webapp/pages/password-reset/enter-nonce.spec.js

@@ -1,9 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import enterNonce from './enter-nonce.vue'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-link'] = '<span class="nuxt-link"><slot /></span>'
+const stubs = {
+  'nuxt-link': true,
+}
 
 describe('enter-nonce.vue', () => {
   let wrapper
@@ -20,7 +22,7 @@ describe('enter-nonce.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(enterNonce, { mocks, localVue })
+      return mount(enterNonce, { mocks, localVue, stubs })
     }
 
     beforeEach(() => {

webapp/pages/password-reset/request.spec.js

@@ -1,10 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import request from './request.vue'
 
 const localVue = global.localVue
 
-// config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['nuxt-link'] = '<span class="nuxt-link"><slot /></span>'
+  'nuxt-link': true,
+}
 
 describe('request.vue', () => {
   let wrapper
@@ -29,7 +30,7 @@ describe('request.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(request, { mocks, localVue })
+      return mount(request, { mocks, localVue, stubs })
     }
 
     beforeEach(() => {

webapp/pages/post/_id/_slug/index.spec.js

@@ -1,4 +1,4 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Vue from 'vue'
 import PostSlug from './index.vue'
@@ -6,10 +6,6 @@ import CommentList from '~/components/CommentList/CommentList'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import VueMeta from 'vue-meta'
 
-config.stubs['client-only'] = '<span><slot /></span>'
-config.stubs['nuxt-link'] = '<span><slot /></span>'
-config.stubs['router-link'] = '<span><slot /></span>'
-
 const localVue = global.localVue
 localVue.directive('scrollTo', jest.fn())
 localVue.use(VueMeta, { keyName: 'head' })
@@ -81,6 +77,9 @@ describe('PostSlug', () => {
         },
       }
       stubs = {
+        'client-only': true,
+        'nuxt-link': true,
+        'router-link': true,
         HcEditor: { render: () => {}, methods: { insertReply: jest.fn(() => null) } },
         ContentViewer: true,
       }
@@ -148,7 +147,7 @@ describe('PostSlug', () => {
     describe('reply method called when emitted reply received', () => {
       it('CommentList', async () => {
         wrapper = await Wrapper()
-        wrapper.find(CommentList).vm.$emit('reply', {
+        wrapper.findComponent(CommentList).vm.$emit('reply', {
           id: 'commentAuthorId',
           slug: 'ogerly',
         })
@@ -176,12 +175,12 @@ describe('PostSlug', () => {
 
       it('are present', async () => {
         // Get length from backendData and compare against number of tags present in component.
-        expect(wrapper.findAll(HcHashtag).length).toBe(backendData.post.tags.length)
+        expect(wrapper.findAllComponents(HcHashtag).length).toBe(backendData.post.tags.length)
       })
 
       it('are alphabetically ordered', async () => {
         // Get all HcHastag components
-        const wrappers = wrapper.findAll(HcHashtag).wrappers
+        const wrappers = wrapper.findAllComponents(HcHashtag).wrappers
         // Exctract ID properties (tag names) from component.
         const ids = []
         wrappers.forEach((x) => {

webapp/pages/profile/_id.spec.js

@@ -1,9 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import _id from './_id.vue'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-child'] = '<span class="nuxt-child"><slot /></span>'
+const stubs = {
+  'nuxt-child': true,
+}
 
 describe('Profile _id.vue', () => {
   let wrapper
@@ -19,6 +21,7 @@ describe('Profile _id.vue', () => {
       return mount(_id, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -27,7 +30,7 @@ describe('Profile _id.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.findAll('.nuxt-child')).toHaveLength(1)
+      expect(wrapper.findComponent({ name: 'nuxt-child' }).exists()).toBe(true)
     })
   })
 })

webapp/pages/profile/_id/_slug.spec.js

@@ -1,15 +1,18 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import ProfileSlug from './_slug.vue'
 
 const localVue = global.localVue
 
 localVue.filter('date', (d) => d)
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['v-popover'] = '<span><slot /></span>'
+  'client-only': true,
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'v-popover': true,
-config.stubs['infinite-loading'] = '<span><slot /></span>'
+  'nuxt-link': true,
-config.stubs['follow-list'] = '<span><slot /></span>'
+  'infinite-loading': true,
+  'follow-list': true,
+  'router-link': true,
+}
 
 describe('ProfileSlug', () => {
   let wrapper
@@ -51,6 +54,7 @@ describe('ProfileSlug', () => {
       return mount(ProfileSlug, {
         mocks,
         localVue,
+        stubs,
       })
     }
 

webapp/pages/registration.spec.js

@@ -1,14 +1,16 @@
 import Vuex from 'vuex'
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Registration from './registration.vue'
 import Vue from 'vue'
 
 const localVue = global.localVue
 
-config.stubs['client-only'] = '<span><slot /></span>'
+const stubs = {
-config.stubs['router-link'] = '<span><slot /></span>'
+  'client-only': true,
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+  'router-link': true,
-config.stubs['infinite-loading'] = '<span><slot /></span>'
+  'nuxt-link': true,
+  'infinite-loading': true,
+}
 
 describe('Registration', () => {
   let wrapper
@@ -73,6 +75,7 @@ describe('Registration', () => {
       return mount(Registration, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -310,7 +313,7 @@ describe('Registration', () => {
 
     it('renders', async () => {
       wrapper = await Wrapper()
-      expect(wrapper.is('.registration-slider')).toBe(true)
+      expect(wrapper.classes('registration-slider')).toBe(true)
     })
 
     // The asyncTests must go last

webapp/pages/search/search-results.spec.js

@@ -1,11 +1,13 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import searchResults from './search-results.vue'
 import VueMeta from 'vue-meta'
 
 const localVue = global.localVue
 localVue.use(VueMeta, { keyName: 'head' })
 
-config.stubs['client-only'] = '<span class="client-only"><slot /></span>'
+const stubs = {
+  'client-only': true,
+}
 
 describe('search-results.vue', () => {
   let wrapper
@@ -32,7 +34,7 @@ describe('search-results.vue', () => {
           return { ...data, ...aData }
         }
       }
-      return mount(searchResults, { mocks, localVue })
+      return mount(searchResults, { mocks, localVue, stubs })
     }
 
     it('renders', async () => {

webapp/pages/settings.spec.js

@@ -1,9 +1,11 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import settings from './settings.vue'
 
 const localVue = global.localVue
 
-config.stubs['nuxt-child'] = '<span class="nuxt-child"><slot /></span>'
+const stubs = {
+  'nuxt-child': true,
+}
 
 describe('settings.vue', () => {
   let wrapper
@@ -20,6 +22,7 @@ describe('settings.vue', () => {
       return mount(settings, {
         mocks,
         localVue,
+        stubs,
       })
     }
 
@@ -28,7 +31,7 @@ describe('settings.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
   })
 })

webapp/pages/settings/blocked-users.spec.js

@@ -1,4 +1,4 @@
-import { config, mount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import BlockedUsers from './blocked-users.vue'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
@@ -9,7 +9,9 @@ const localVue = createLocalVue()
 localVue.use(Styleguide)
 localVue.use(Filters)
 
-config.stubs['nuxt-link'] = '<span><slot /></span>'
+const stubs = {
+  'nuxt-link': true,
+}
 
 describe('blocked-users.vue', () => {
   let wrapper
@@ -35,7 +37,7 @@ describe('blocked-users.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(BlockedUsers, { mocks, localVue })
+      return mount(BlockedUsers, { mocks, localVue, stubs })
     }
 
     beforeEach(() => {
@@ -43,7 +45,7 @@ describe('blocked-users.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('div')).toBe(true)
+      expect(wrapper.element.tagName).toBe('DIV')
     })
 
     describe('given a list of blocked users', () => {

webapp/pages/settings/data-download.spec.js

@@ -26,7 +26,7 @@ describe('data-download.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.is('.base-card')).toBe(true)
+      expect(wrapper.classes('base-card')).toBe(true)
     })
   })
 })