Update deps

Author: afontcu

package.json

@@ -48,15 +48,15 @@
   "dependencies": {
     "@babel/runtime": "^7.12.1",
     "@testing-library/dom": "^7.28.1",
-    "@vue/test-utils": "^2.0.0-beta.11",
+    "@vue/test-utils": "^2.0.0-beta.12",
     "lodash.merge": "^4.6.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/user-event": "^12.2.2",
+    "@testing-library/user-event": "^12.4.0",
     "@types/estree": "0.0.45",
-    "@vue/compiler-sfc": "^3.0.3",
+    "@vue/compiler-sfc": "^3.0.4",
     "apollo-boost": "^0.4.9",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
@@ -67,16 +67,16 @@
     "graphql-tag": "^2.11.0",
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
-    "kcd-scripts": "^7.3.0",
+    "kcd-scripts": "^7.5.1",
     "msw": "^0.21.3",
     "portal-vue": "^2.1.7",
     "typescript": "^4.1.2",
     "vee-validate": "^4.0.2",
-    "vue": "^3.0.3",
+    "vue": "^3.0.4",
     "vue-apollo": "^3.0.5",
     "vue-i18n": "^9.0.0-beta.6",
-    "vue-jest": "^5.0.0-alpha.5",
-    "vue-router": "^4.0.0-rc.1",
+    "vue-jest": "^5.0.0-alpha.7",
+    "vue-router": "^4.0.0-rc.6",
     "vuetify": "^2.3.19",
     "vuex": "^4.0.0-rc.2"
   },

src/__tests__/select.js

@@ -9,19 +9,19 @@ test('Select component', async () => {
 
   // Get the Select element by using the initially displayed value.
   const select = getByDisplayValue('Tyrannosaurus')
-  expect(select.value).toBe('dino1')
+  expect(select).toHaveValue('dino1')
 
   // Update it by manually sending a valid option value.
   await fireEvent.update(select, 'dino2')
-  expect(select.value).toBe('dino2')
+  expect(select).toHaveValue('dino2')
 
   // We can trigger an update event by directly getting the <option> element.
   optionElement = getByText('Deinonychus')
   await fireEvent.update(optionElement)
-  expect(select.value).toBe('dino3')
+  expect(select).toHaveValue('dino3')
 
   // ...even if option is within an <optgroup>.
   optionElement = getByText('Diplodocus')
   await fireEvent.update(optionElement)
-  expect(select.value).toBe('dino4')
+  expect(select).toHaveValue('dino4')
 })

src/__tests__/user-event.js

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
-import {render} from '..'
+import {render, waitFor} from '..'
 import Form from './components/Form'
 import Select from './components/Select'
 
@@ -24,49 +24,49 @@ test('User events in a form', async () => {
   expect(submitButton).toBeDisabled()
 
   const titleInput = getByLabelText(/title of the movie/i)
-  await userEvent.type(titleInput, fakeReview.title)
-  expect(titleInput.value).toEqual(fakeReview.title)
+  userEvent.type(titleInput, fakeReview.title)
+  expect(titleInput).toHaveValue(fakeReview.title)
 
   const textArea = getByLabelText(/Your review/i)
-  await userEvent.type(textArea, 'The t-rex went insane!')
-  expect(textArea.value).toEqual('The t-rex went insane!')
+  userEvent.type(textArea, 'The t-rex went insane!')
+  expect(textArea).toHaveValue('The t-rex went insane!')
 
-  await userEvent.clear(textArea)
-  expect(textArea.value).toEqual('')
-  await userEvent.type(textArea, fakeReview.review)
-  expect(textArea.value).toEqual(fakeReview.review)
+  userEvent.clear(textArea)
+  expect(textArea).toHaveValue('')
+  userEvent.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()
 
-  await userEvent.click(wonderfulRadioInput)
+  userEvent.click(wonderfulRadioInput)
   expect(wonderfulRadioInput).toBeChecked()
-  expect(initialSelectedRating).not.toBeChecked()
+  await waitFor(() => expect(initialSelectedRating).not.toBeChecked())
 
   const recommendInput = getByLabelText(/Would you recommend this movie?/i)
-  await userEvent.click(recommendInput)
+  userEvent.click(recommendInput)
   expect(recommendInput).toBeChecked()
 
   userEvent.tab()
   expect(submitButton).toHaveFocus()
   expect(submitButton).toBeEnabled()
-  await userEvent.type(submitButton, '{enter}')
+  userEvent.type(submitButton, '{enter}')
   expect(emitted().submit[0][0]).toMatchObject(fakeReview)
 
   expect(console.warn).not.toHaveBeenCalled()
 })
 
-test('selecting option with user events', async () => {
+test('selecting option with user events', () => {
   const {getByDisplayValue} = render(Select)
   const select = getByDisplayValue('Tyrannosaurus')
-  expect(select.value).toBe('dino1')
+  expect(select).toHaveValue('dino1')
 
-  await userEvent.selectOptions(select, 'dino2')
-  expect(select.value).toBe('dino2')
+  userEvent.selectOptions(select, 'dino2')
+  expect(select).toHaveValue('dino2')
 
-  await userEvent.selectOptions(select, 'dino3')
-  expect(select.value).not.toBe('dino2')
-  expect(select.value).toBe('dino3')
+  userEvent.selectOptions(select, 'dino3')
+  expect(select).not.toHaveValue('dino2')
+  expect(select).toHaveValue('dino3')
 })