chore: upgrade to Jest 27 (#384)

* chore: upgrade to Jest 27

* fix: ESLint config

Co-authored-by: Ernesto García <gnapse@gmail.com>

package.json

@@ -45,13 +45,13 @@
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.2.1",
-    "kcd-scripts": "^5.6.0",
+    "kcd-scripts": "^11.1.0",
     "pretty-format": "^25.1.0"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",
     "rules": {
-      "babel/no-invalid-this": "off"
+      "@babel/no-invalid-this": "off"
     },
     "overrides": [
       {

src/__tests__/to-contain-html.js

@@ -102,11 +102,11 @@ describe('.toContainHTML', () => {
     }
 
     expect(errorMessage).toMatchInlineSnapshot(`
-      "<dim>expect(</><red>element</><dim>).toContainHTML()</>
-      Expected:
-        <green><div> non-existant element </div></>
-      Received:
-        <red><span data-testid=\\"child\\" /></>"
-    `)
+<dim>expect(</><red>element</><dim>).toContainHTML()</>
+Expected:
+  <green><div> non-existant element </div></>
+Received:
+  <red><span data-testid="child" /></>
+`)
   })
 })

src/__tests__/to-have-display-value.js

@@ -129,7 +129,7 @@ test('it should throw if element is not valid', () => {
   }
 
   expect(errorMessage).toMatchInlineSnapshot(
-    `".toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead."`,
+    `.toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead.`,
   )
 
   try {
@@ -139,7 +139,7 @@ test('it should throw if element is not valid', () => {
   }
 
   expect(errorMessage).toMatchInlineSnapshot(
-    `".toHaveDisplayValue() currently does not support input[type=\\"radio\\"], try with another matcher instead."`,
+    `.toHaveDisplayValue() currently does not support input[type="radio"], try with another matcher instead.`,
   )
 
   try {
@@ -149,7 +149,7 @@ test('it should throw if element is not valid', () => {
   }
 
   expect(errorMessage).toMatchInlineSnapshot(
-    `".toHaveDisplayValue() currently does not support input[type=\\"checkbox\\"], try with another matcher instead."`,
+    `.toHaveDisplayValue() currently does not support input[type="checkbox"], try with another matcher instead.`,
   )
 })
 

src/__tests__/to-have-value.js

@@ -115,13 +115,13 @@ describe('.toHaveValue', () => {
     }
 
     expect(errorMessage).toMatchInlineSnapshot(`
-      "<dim>expect(</><red>element</><dim>).toHaveValue(</><green>something else</><dim>)</>
+<dim>expect(</><red>element</><dim>).toHaveValue(</><green>something else</><dim>)</>
 
-      Expected the element to have value:
-      <green>  something else</>
-      Received:
-      <red>  foo</>"
-    `)
+Expected the element to have value:
+<green>  something else</>
+Received:
+<red>  foo</>
+`)
   })
 
   test('throws with type information when the expected text input value has loose equality with received value', () => {
@@ -135,13 +135,13 @@ describe('.toHaveValue', () => {
     }
 
     expect(errorMessage).toMatchInlineSnapshot(`
-      "<dim>expect(</><red>element</><dim>).toHaveValue(</><green>8</><dim>)</>
+<dim>expect(</><red>element</><dim>).toHaveValue(</><green>8</><dim>)</>
 
-      Expected the element to have value:
-      <green>  8 (number)</>
-      Received:
-      <red>  8 (string)</>"
-    `)
+Expected the element to have value:
+<green>  8 (number)</>
+Received:
+<red>  8 (string)</>
+`)
   })
 
   test('throws when using not but the expected input value does match', () => {
@@ -155,13 +155,13 @@ describe('.toHaveValue', () => {
       errorMessage = error.message
     }
     expect(errorMessage).toMatchInlineSnapshot(`
-      "<dim>expect(</><red>element</><dim>).not.toHaveValue(</><green>foo</><dim>)</>
+<dim>expect(</><red>element</><dim>).not.toHaveValue(</><green>foo</><dim>)</>
 
-      Expected the element not to have value:
-      <green>  foo</>
-      Received:
-      <red>  foo</>"
-    `)
+Expected the element not to have value:
+<green>  foo</>
+Received:
+<red>  foo</>
+`)
   })
 
   test('throws when the form has no a value but a value is expected', () => {
@@ -175,13 +175,13 @@ describe('.toHaveValue', () => {
       errorMessage = error.message
     }
     expect(errorMessage).toMatchInlineSnapshot(`
-      "<dim>expect(</><red>element</><dim>).toHaveValue(</><green>expected</><dim>)</>
+<dim>expect(</><red>element</><dim>).toHaveValue(</><green>expected</><dim>)</>
 
-      Expected the element to have value:
-      <green>  (any)</>
-      Received:
-      "
-    `)
+Expected the element to have value:
+<green>  (any)</>
+Received:
+
+`)
   })
 
   test('throws when the form has a value but none is expected', () => {
@@ -195,12 +195,12 @@ describe('.toHaveValue', () => {
       errorMessage = error.message
     }
     expect(errorMessage).toMatchInlineSnapshot(`
-      "<dim>expect(</><red>element</><dim>).not.toHaveValue(</><green>expected</><dim>)</>
+<dim>expect(</><red>element</><dim>).not.toHaveValue(</><green>expected</><dim>)</>
 
-      Expected the element not to have value:
-      <green>  (any)</>
-      Received:
-      <red>  foo</>"
-    `)
+Expected the element not to have value:
+<green>  (any)</>
+Received:
+<red>  foo</>
+`)
   })
 })

src/to-be-in-the-document.js

@@ -29,7 +29,7 @@ export function toBeInTheDocument(element) {
           '',
         ),
         '',
-        // eslint-disable-next-line babel/new-cap
+        // eslint-disable-next-line @babel/new-cap
         this.utils.RECEIVED_COLOR(this.isNot ? errorFound() : errorNotFound()),
       ].join('\n')
     },

src/to-contain-element.js

@@ -17,7 +17,7 @@ export function toContainElement(container, element) {
           'element',
         ),
         '',
-        // eslint-disable-next-line babel/new-cap
+        // eslint-disable-next-line @babel/new-cap
         this.utils.RECEIVED_COLOR(`${this.utils.stringify(
           container.cloneNode(false),
         )} ${

src/to-contain-html.js

@@ -23,7 +23,7 @@ export function toContainHTML(container, htmlText) {
           '',
         ),
         'Expected:',
-        // eslint-disable-next-line babel/new-cap
+        // eslint-disable-next-line @babel/new-cap
         `  ${this.utils.EXPECTED_COLOR(htmlText)}`,
         'Received:',
         `  ${this.utils.printReceived(container.cloneNode(true))}`,

src/utils.js

@@ -28,7 +28,7 @@ class GenericTypeError extends Error {
         '',
       ),
       '',
-      // eslint-disable-next-line babel/new-cap
+      // eslint-disable-next-line @babel/new-cap
       `${context.utils.RECEIVED_COLOR(
         'received',
       )} value must ${expectedString}.`,
@@ -91,9 +91,9 @@ class InvalidCSSError extends Error {
     this.message = [
       received.message,
       '',
-      // eslint-disable-next-line babel/new-cap
+      // eslint-disable-next-line @babel/new-cap
       context.utils.RECEIVED_COLOR(`Failing css:`),
-      // eslint-disable-next-line babel/new-cap
+      // eslint-disable-next-line @babel/new-cap
       context.utils.RECEIVED_COLOR(`${received.css}`),
     ].join('\n')
   }
@@ -137,11 +137,11 @@ function getMessage(
 ) {
   return [
     `${matcher}\n`,
-    // eslint-disable-next-line babel/new-cap
+    // eslint-disable-next-line @babel/new-cap
     `${expectedLabel}:\n${context.utils.EXPECTED_COLOR(
       redent(display(context, expectedValue), 2),
     )}`,
-    // eslint-disable-next-line babel/new-cap
+    // eslint-disable-next-line @babel/new-cap
     `${receivedLabel}:\n${context.utils.RECEIVED_COLOR(
       redent(display(context, receivedValue), 2),
     )}`,