fix: do not explicitly depend on jest assertion utils (#250)

Co-authored-by: Ernesto García <gnapse@gmail.com>
testing-library · Aug 22, 2020 · 2da8c71 · 2da8c71
1 parent 92176e1
commit 2da8c71
Show file tree

Hide file tree

Showing 24 changed files with 163 additions and 119 deletions.
diff --git a/package.json b/package.json
@@ -37,8 +37,6 @@
     "chalk": "^3.0.0",
     "css": "^3.0.0",
     "css.escape": "^1.5.1",
-    "jest-diff": "^25.1.0",
-    "jest-matcher-utils": "^25.1.0",
     "lodash": "^4.17.15",
     "redent": "^3.0.0"
   },

diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
@@ -22,10 +22,22 @@ test('deprecate', () => {
 })
 
 describe('checkHtmlElement', () => {
+  let assertionContext
+  beforeAll(() => {
+    expect.extend({
+      fakeMatcher() {
+        assertionContext = this
+
+        return {pass: true}
+      },
+    })
+
+    expect(true).fakeMatcher(true)
+  })
   it('does not throw an error for correct html element', () => {
     expect(() => {
       const element = document.createElement('p')
-      checkHtmlElement(element, () => {}, {})
+      checkHtmlElement(element, () => {}, assertionContext)
     }).not.toThrow()
   })
 
@@ -35,25 +47,25 @@ describe('checkHtmlElement', () => {
         'http://www.w3.org/2000/svg',
         'rect',
       )
-      checkHtmlElement(element, () => {}, {})
+      checkHtmlElement(element, () => {}, assertionContext)
     }).not.toThrow()
   })
 
   it('does not throw for body', () => {
     expect(() => {
-      checkHtmlElement(document.body, () => {}, {})
+      checkHtmlElement(document.body, () => {}, assertionContext)
     }).not.toThrow()
   })
 
   it('throws for undefined', () => {
     expect(() => {
-      checkHtmlElement(undefined, () => {}, {})
+      checkHtmlElement(undefined, () => {}, assertionContext)
     }).toThrow(HtmlElementTypeError)
   })
 
   it('throws for document', () => {
     expect(() => {
-      checkHtmlElement(document, () => {}, {})
+      checkHtmlElement(document, () => {}, assertionContext)
     }).toThrow(HtmlElementTypeError)
   })
 
@@ -62,7 +74,7 @@ describe('checkHtmlElement', () => {
       checkHtmlElement(
         () => {},
         () => {},
-        {},
+        assertionContext,
       )
     }).toThrow(HtmlElementTypeError)
   })
@@ -77,7 +89,7 @@ describe('checkHtmlElement', () => {
           },
         },
         () => {},
-        {},
+        assertionContext,
       )
     }).toThrow(HtmlElementTypeError)
   })

diff --git a/src/to-be-checked.js b/src/to-be-checked.js
@@ -1,5 +1,4 @@
 import {roles} from 'aria-query'
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, toSentence} from './utils'
 
 export function toBeChecked(element) {
@@ -37,10 +36,14 @@ export function toBeChecked(element) {
     message: () => {
       const is = isChecked() ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeChecked`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeChecked`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} checked:`,
-        `  ${printReceived(element.cloneNode(false))}`,
+        `  ${this.utils.printReceived(element.cloneNode(false))}`,
       ].join('\n')
     },
   }

diff --git a/src/to-be-disabled.js b/src/to-be-disabled.js
@@ -1,4 +1,3 @@
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, getTag} from './utils'
 
 // form elements that support 'disabled'
@@ -70,10 +69,14 @@ export function toBeDisabled(element) {
     message: () => {
       const is = isDisabled ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeDisabled`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeDisabled`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} disabled:`,
-        `  ${printReceived(element.cloneNode(false))}`,
+        `  ${this.utils.printReceived(element.cloneNode(false))}`,
       ].join('\n')
     },
   }
@@ -89,10 +92,14 @@ export function toBeEnabled(element) {
     message: () => {
       const is = isEnabled ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeEnabled`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeEnabled`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} enabled:`,
-        `  ${printReceived(element.cloneNode(false))}`,
+        `  ${this.utils.printReceived(element.cloneNode(false))}`,
       ].join('\n')
     },
   }

diff --git a/src/to-be-empty-dom-element.js b/src/to-be-empty-dom-element.js
@@ -1,4 +1,3 @@
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
 export function toBeEmptyDOMElement(element) {
@@ -8,14 +7,14 @@ export function toBeEmptyDOMElement(element) {
     pass: element.innerHTML === '',
     message: () => {
       return [
-        matcherHint(
+        this.utils.matcherHint(
           `${this.isNot ? '.not' : ''}.toBeEmptyDOMElement`,
           'element',
           '',
         ),
         '',
         'Received:',
-        `  ${printReceived(element.innerHTML)}`,
+        `  ${this.utils.printReceived(element.innerHTML)}`,
       ].join('\n')
     },
   }

diff --git a/src/to-be-empty.js b/src/to-be-empty.js
@@ -1,4 +1,3 @@
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, deprecate} from './utils'
 
 export function toBeEmpty(element) {
@@ -12,10 +11,14 @@ export function toBeEmpty(element) {
     pass: element.innerHTML === '',
     message: () => {
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeEmpty`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeEmpty`,
+          'element',
+          '',
+        ),
         '',
         'Received:',
-        `  ${printReceived(element.innerHTML)}`,
+        `  ${this.utils.printReceived(element.innerHTML)}`,
       ].join('\n')
     },
   }

diff --git a/src/to-be-in-the-document.js b/src/to-be-in-the-document.js
@@ -1,8 +1,3 @@
-import {
-  matcherHint,
-  stringify,
-  RECEIVED_COLOR as receivedColor,
-} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
 export function toBeInTheDocument(element) {
@@ -14,7 +9,7 @@ export function toBeInTheDocument(element) {
     element === null ? false : element.ownerDocument.contains(element)
 
   const errorFound = () => {
-    return `expected document not to contain element, found ${stringify(
+    return `expected document not to contain element, found ${this.utils.stringify(
       element.cloneNode(true),
     )} instead`
   }
@@ -26,13 +21,14 @@ export function toBeInTheDocument(element) {
     pass,
     message: () => {
       return [
-        matcherHint(
+        this.utils.matcherHint(
           `${this.isNot ? '.not' : ''}.toBeInTheDocument`,
           'element',
           '',
         ),
         '',
-        receivedColor(this.isNot ? errorFound() : errorNotFound()),
+        // eslint-disable-next-line babel/new-cap
+        this.utils.RECEIVED_COLOR(this.isNot ? errorFound() : errorNotFound()),
       ].join('\n')
     },
   }

diff --git a/src/to-be-in-the-dom.js b/src/to-be-in-the-dom.js
@@ -1,4 +1,3 @@
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, deprecate} from './utils'
 
 export function toBeInTheDOM(element, container) {
@@ -19,10 +18,16 @@ export function toBeInTheDOM(element, container) {
     pass: container ? container.contains(element) : !!element,
     message: () => {
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeInTheDOM`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeInTheDOM`,
+          'element',
+          '',
+        ),
         '',
         'Received:',
-        `  ${printReceived(element ? element.cloneNode(false) : element)}`,
+        `  ${this.utils.printReceived(
+          element ? element.cloneNode(false) : element,
+        )}`,
       ].join('\n')
     },
   }

diff --git a/src/to-be-invalid.js b/src/to-be-invalid.js
@@ -1,4 +1,3 @@
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, getTag} from './utils'
 
 const FORM_TAGS = ['form', 'input', 'select', 'textarea']
@@ -33,10 +32,14 @@ export function toBeInvalid(element) {
     message: () => {
       const is = isInvalid ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeInvalid`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeInvalid`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} currently invalid:`,
-        `  ${printReceived(element.cloneNode(false))}`,
+        `  ${this.utils.printReceived(element.cloneNode(false))}`,
       ].join('\n')
     },
   }
@@ -52,10 +55,14 @@ export function toBeValid(element) {
     message: () => {
       const is = isValid ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeValid`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeValid`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} currently valid:`,
-        `  ${printReceived(element.cloneNode(false))}`,
+        `  ${this.utils.printReceived(element.cloneNode(false))}`,
       ].join('\n')
     },
   }

diff --git a/src/to-be-partially-checked.js b/src/to-be-partially-checked.js
@@ -1,4 +1,3 @@
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
 export function toBePartiallyChecked(element) {
@@ -37,14 +36,14 @@ export function toBePartiallyChecked(element) {
     message: () => {
       const is = isPartiallyChecked() ? 'is' : 'is not'
       return [
-        matcherHint(
+        this.utils.matcherHint(
           `${this.isNot ? '.not' : ''}.toBePartiallyChecked`,
           'element',
           '',
         ),
         '',
         `Received element ${is} partially checked:`,
-        `  ${printReceived(element.cloneNode(false))}`,
+        `  ${this.utils.printReceived(element.cloneNode(false))}`,
       ].join('\n')
     },
   }

diff --git a/src/to-be-required.js b/src/to-be-required.js
@@ -1,4 +1,3 @@
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, getTag} from './utils'
 
 // form elements that support 'required'
@@ -60,10 +59,14 @@ export function toBeRequired(element) {
     message: () => {
       const is = isRequired ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeRequired`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeRequired`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} required:`,
-        `  ${printReceived(element.cloneNode(false))}`,
+        `  ${this.utils.printReceived(element.cloneNode(false))}`,
       ].join('\n')
     },
   }

diff --git a/src/to-be-visible.js b/src/to-be-visible.js
@@ -1,4 +1,3 @@
-import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
 function isStyleVisible(element) {
@@ -39,10 +38,14 @@ export function toBeVisible(element) {
     message: () => {
       const is = isVisible ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeVisible`, 'element', ''),
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.toBeVisible`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} visible:`,
-        `  ${printReceived(element.cloneNode(false))}`,
+        `  ${this.utils.printReceived(element.cloneNode(false))}`,
       ].join('\n')
     },
   }

diff --git a/src/to-contain-element.js b/src/to-contain-element.js
@@ -1,8 +1,3 @@
-import {
-  matcherHint,
-  stringify,
-  RECEIVED_COLOR as receivedColor,
-} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
 export function toContainElement(container, element) {
@@ -16,15 +11,18 @@ export function toContainElement(container, element) {
     pass: container.contains(element),
     message: () => {
       return [
-        matcherHint(
+        this.utils.matcherHint(
           `${this.isNot ? '.not' : ''}.toContainElement`,
           'element',
           'element',
         ),
         '',
-        receivedColor(`${stringify(container.cloneNode(false))} ${
+        // eslint-disable-next-line babel/new-cap
+        this.utils.RECEIVED_COLOR(`${this.utils.stringify(
+          container.cloneNode(false),
+        )} ${
           this.isNot ? 'contains:' : 'does not contain:'
-        } ${stringify(element ? element.cloneNode(false) : element)}
+        } ${this.utils.stringify(element ? element.cloneNode(false) : element)}
         `),
       ].join('\n')
     },