feat: Bump minimum node.js version and DOM Testing Library (#303)

BREAKING CHANGE: This PR increases the minimum node.js version to v14, and DOM Testing Library to v9.

.eslintrc.js

@@ -1,14 +1,15 @@
 module.exports = {
+  parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@typescript-eslint/parser',
+    sourceType: 'module',
   },
   extends: [
     './node_modules/kcd-scripts/eslint.js',
     'plugin:vue/vue3-recommended',
     'plugin:testing-library/vue',
     'prettier',
   ],
-  plugins: ['vue'],
   rules: {
     'no-console': 'off',
     'import/no-unresolved': 'off',

.github/workflows/validate.yml

@@ -17,7 +17,7 @@ jobs:
   main:
     strategy:
       matrix:
-        node: [12, 14, 16]
+        node: [14, 16, 18]
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
@@ -56,7 +56,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1

babel.config.js

@@ -1,5 +1,11 @@
 module.exports = {
   sourceType: 'module',
+  plugins: [
+    // Fixes for loose issue from https://github.com/rails/webpacker/issues/3008
+    ['@babel/plugin-proposal-class-properties', {loose: true}],
+    ['@babel/plugin-proposal-private-methods', {loose: true}],
+    ['@babel/plugin-proposal-private-property-in-object', {loose: true}],
+  ],
   presets: [
     [
       '@babel/preset-env',

jest.config.js

@@ -3,12 +3,15 @@ const config = require('kcd-scripts/jest')
 
 module.exports = merge(config, {
   testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ['node', 'node-addons'],
+  },
   moduleFileExtensions: ['js', 'vue'],
   coverageDirectory: './coverage',
   collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
   },
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   testPathIgnorePatterns: [

package.json

@@ -15,7 +15,7 @@
     "setup": "npm install && npm run validate -s"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "files": [
     "types",
@@ -43,39 +43,36 @@
   "author": "Daniel Cook",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
-    "@testing-library/dom": "^8.5.0",
-    "@vue/test-utils": "^2.0.0"
+    "@babel/runtime": "^7.21.0",
+    "@testing-library/dom": "^9.0.1",
+    "@vue/test-utils": "^2.3.1"
   },
   "devDependencies": {
-    "@apollo/client": "^3.4.11",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/estree": "^0.0.50",
-    "@vue/apollo-composable": "^4.0.0-alpha.14",
-    "@vue/compiler-sfc": "^3.2.12",
-    "apollo-boost": "^0.4.9",
-    "axios": "^0.20.0",
-    "element-plus": "^1.3.0-beta.1",
-    "eslint-plugin-vue": "^8.2.0",
-    "graphql": "^15.5.3",
-    "graphql-tag": "^2.12.4",
-    "isomorphic-unfetch": "^3.1.0",
-    "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^10.0.0",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@element-plus/icons-vue": "^2.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/estree": "^1.0.0",
+    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/server-renderer": "^3.2.47",
+    "@vue/vue3-jest": "^29.2.3",
+    "axios": "^1.3.4",
+    "element-plus": "^2.2.36",
+    "eslint-plugin-vue": "^9.9.0",
+    "isomorphic-unfetch": "^4.0.2",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-serializer-vue": "^3.1.0",
+    "kcd-scripts": "^13.0.0",
     "lodash.merge": "^4.6.2",
-    "msw": "^0.21.3",
-    "tsd": "^0.19.1",
-    "typescript": "^4.4.3",
-    "vee-validate": "^4.3.5",
-    "vue": "^3.2.12",
-    "vue-apollo": "^3.0.5",
-    "vue-i18n": "^9.2.0-beta.26",
-    "vue-jest": "^5.0.0-alpha.10",
-    "vue-router": "^4.0.3",
-    "vuetify": "^v3.0.0-alpha.12",
-    "vuex": "^4.0.0"
+    "msw": "^1.1.0",
+    "tsd": "^0.27.0",
+    "typescript": "^4.9.5",
+    "vee-validate": "^4.7.4",
+    "vue": "^3.2.47",
+    "vue-eslint-parser": "^9.1.0",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.6",
+    "vuex": "^4.1.0"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": ">= 3",

src/__tests__/hello-world-debug.js

@@ -1,4 +1,4 @@
-/* eslint-disable testing-library/no-debug */
+/* eslint-disable testing-library/no-debugging-utils */
 import {render} from '..'
 import HelloWorld from './components/HelloWorld'
 
@@ -67,7 +67,7 @@ test('allows same arguments as prettyDOM', () => {
 
   expect(console.log).toHaveBeenCalledTimes(1)
   expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
-    Array [
+    [
       <div>
       ...,
     ]

src/__tests__/user-event.js

@@ -18,55 +18,58 @@ test('User events in a form', async () => {
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     rating: '3',
   }
+  const user = userEvent.setup()
   const {getByText, getByLabelText, emitted} = render(Form)
 
   const submitButton = getByText('Submit')
   expect(submitButton).toBeDisabled()
 
   const titleInput = getByLabelText(/title of the movie/i)
-  userEvent.type(titleInput, fakeReview.title)
+  await user.type(titleInput, fakeReview.title)
   expect(titleInput).toHaveValue(fakeReview.title)
 
   const textArea = getByLabelText(/Your review/i)
-  userEvent.type(textArea, 'The t-rex went insane!')
+  await user.type(textArea, 'The t-rex went insane!')
   expect(textArea).toHaveValue('The t-rex went insane!')
 
-  userEvent.clear(textArea)
+  await user.clear(textArea)
   expect(textArea).toHaveValue('')
-  userEvent.type(textArea, fakeReview.review)
+  await user.type(textArea, fakeReview.review)
   expect(textArea).toHaveValue(fakeReview.review)
 
   const initialSelectedRating = getByLabelText(/Awful/i)
   const wonderfulRadioInput = getByLabelText(/Wonderful/i)
   expect(initialSelectedRating).toBeChecked()
   expect(wonderfulRadioInput).not.toBeChecked()
 
-  userEvent.click(wonderfulRadioInput)
+  await user.click(wonderfulRadioInput)
   expect(wonderfulRadioInput).toBeChecked()
   await waitFor(() => expect(initialSelectedRating).not.toBeChecked())
 
   const recommendInput = getByLabelText(/Would you recommend this movie?/i)
-  userEvent.click(recommendInput)
+  await user.click(recommendInput)
   expect(recommendInput).toBeChecked()
 
-  userEvent.tab()
+  await user.tab()
   expect(submitButton).toHaveFocus()
   expect(submitButton).toBeEnabled()
-  userEvent.type(submitButton, '{enter}')
+  await user.type(submitButton, '{enter}')
   expect(emitted('submit')[0][0]).toMatchObject(fakeReview)
 
   expect(console.warn).not.toHaveBeenCalled()
 })
 
-test('selecting option with user events', () => {
+test('selecting option with user events', async () => {
+  const user = userEvent.setup()
   const {getByDisplayValue} = render(Select)
+
   const select = getByDisplayValue('Tyrannosaurus')
   expect(select).toHaveValue('dino1')
 
-  userEvent.selectOptions(select, 'dino2')
+  await user.selectOptions(select, 'dino2')
   expect(select).toHaveValue('dino2')
 
-  userEvent.selectOptions(select, 'dino3')
+  await user.selectOptions(select, 'dino3')
   expect(select).not.toHaveValue('dino2')
   expect(select).toHaveValue('dino3')
 })