chore: upgrade to Jest 27

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),
  )}`,