chore: upgrade to kcd-scripts 10

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   extends: [
     './node_modules/kcd-scripts/eslint.js',
     'plugin:vue/recommended',
-    'prettier/vue',
+    'prettier',
   ],
   plugins: ['vue'],
   rules: {
@@ -18,5 +18,7 @@ module.exports = {
     'testing-library/no-manual-cleanup': 'off',
     'testing-library/no-await-sync-events': 'off',
     'testing-library/await-fire-event': 'error',
+    'testing-library/prefer-user-event': 'off',
+    'testing-library/no-node-access': 'off',
   },
 }

package.json

@@ -62,7 +62,7 @@
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.0.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^7.0.3",
+    "kcd-scripts": "^10.1.1",
     "lodash.merge": "^4.6.2",
     "msw": "^0.26.2",
     "portal-vue": "^2.1.7",

src/__tests__/auto-cleanup.js

@@ -15,5 +15,5 @@ test('render the first component', () => {
 })
 
 test('cleans up after each test by default', () => {
-  expect(document.body.innerHTML).toMatchInlineSnapshot(`""`)
+  expect(document.body.innerHTML).toMatchInlineSnapshot(``)
 })

src/__tests__/form-user-event.js

@@ -1,3 +1,4 @@
+/* eslint-enable testing-library/prefer-user-event */
 import '@testing-library/jest-dom'
 import {render, waitFor} from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'

src/__tests__/select-user-event.js

@@ -1,3 +1,4 @@
+/* eslint-enable testing-library/prefer-user-event */
 import '@testing-library/jest-dom'
 import {render} from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'

src/__tests__/vuetify.js

@@ -43,7 +43,7 @@ test('renders a Vuetify-powered component', async () => {
 
   expect(getByText('Lorem ipsum dolor sit amet.')).toMatchInlineSnapshot(`
     <div
-      class="v-card__text"
+      class=v-card__text
     >
       Lorem ipsum dolor sit amet.
     </div>

src/__tests__/within.js

@@ -27,7 +27,7 @@ test('within() returns an object with all queries bound to the DOM node', () =>
   // Here, proof that there's only one match for the specified text.
   expect(divNode).toMatchInlineSnapshot(`
     <div
-      data-testid="div"
+      data-testid=div
     >
       repeated text
     </div>

src/fire-event.js

@@ -1,4 +1,4 @@
-/* eslint-disable testing-library/no-wait-for-empty-callback */
+/* eslint-disable testing-library/no-wait-for-empty-callback, testing-library/await-fire-event */
 import {waitFor, fireEvent as dtlFireEvent} from '@testing-library/dom'
 
 // Vue Testing Lib's version of fireEvent will call DOM Testing Lib's

types/test.ts

@@ -14,20 +14,27 @@ const SomeComponent = Vue.extend({
 })
 
 export async function testRender() {
-  const page = render({template: '<div />'})
+  const {
+    getByText,
+    queryByText,
+    findByText,
+    getAllByText,
+    queryAllByText,
+    findAllByText,
+    container,
+    unmount,
+    debug,
+  } = render({template: '<div />'})
 
   // single queries
-  page.getByText('foo')
-  page.queryByText('foo')
-  await page.findByText('foo')
+  getByText('foo')
+  queryByText('foo')
+  await findByText('foo')
 
   // multiple queries
-  page.getAllByText('bar')
-  page.queryAllByText('bar')
-  await page.findAllByText('bar')
-
-  // helpers
-  const {container, unmount, debug} = page
+  getAllByText('bar')
+  queryAllByText('bar')
+  await findAllByText('bar')
 
   debug(container)