chore: upgrade to Jest 27 (#251)

* chore: upgrade to Jest 27

* chore: replace vue-jest with vue2-jest for Jest 27

* chore: fix lint error

* chore: upgrade msw for bug fix

* chore: update expected test error

* chore: check for type errors based on Node version

Author: nickserv

jest.config.js

@@ -11,7 +11,7 @@ module.exports = merge(config, {
   collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue2-jest',
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   testPathIgnorePatterns: [

package.json

@@ -52,6 +52,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/user-event": "^12.1.10",
     "@types/estree": "0.0.46",
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "axios": "^0.21.1",
@@ -62,16 +63,16 @@
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.0.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^10.1.1",
+    "kcd-scripts": "^11.1.0",
     "lodash.merge": "^4.6.2",
-    "msw": "^0.26.2",
+    "msw": "^0.35.0",
     "portal-vue": "^2.1.7",
+    "semver": "^7.3.5",
     "typescript": "^4.0.5",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.12",
     "vue-apollo": "^3.0.4",
     "vue-i18n": "^8.21.1",
-    "vue-jest": "^4.0.0-rc.0",
     "vue-router": "^3.4.9",
     "vue-template-compiler": "^2.6.12",
     "vuetify": "^2.3.17",

src/__tests__/about-vue-router-mocha.js

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import {render} from '@testing-library/vue'
+import semver from 'semver'
 
 import About from './components/Router/About.vue'
 
@@ -11,6 +12,10 @@ test('uses require("vue-router").default when require("vue-router") is undefined
   })
 
   expect(() => render(About, {routes})).toThrowError(
-    new TypeError("Cannot read property 'default' of undefined"),
+    new TypeError(
+      semver.gte(process.version, '16.0.0')
+        ? "Cannot read properties of undefined (reading 'default')"
+        : "Cannot read property 'default' of undefined",
+    ),
   )
 })

src/__tests__/disappearance.js

@@ -11,7 +11,7 @@ test('waits for the data to be loaded', async () => {
 
   // Following line reads as follows:
   // "Wait until element with text 'Loading...' is gone."
-  await waitForElementToBeRemoved(getByText('Loading...'))
+  await waitForElementToBeRemoved(queryByText('Loading...'))
   // It is equivalent to:
   //
   // await waitFor(() => {