Support for expect.it

src/index.js

@@ -965,8 +965,13 @@ module.exports = {
       '<DOMElement> to [exhaustively] satisfy <object>',
       (expect, subject, value) => {
         const isHtml = isInsideHtmlDocument(subject);
-        ensureSupportedSpecOptions(value);
 
+        if (expect.argTypes[0].is('expect.it')) {
+          expect.context.thisObject = subject;
+          return value(subject, expect.context);
+        }
+
+        ensureSupportedSpecOptions(value);
         const promiseByKey = {
           name: expect.promise(() => {
             if (value && typeof value.name !== 'undefined') {
@@ -1745,7 +1750,11 @@ module.exports = {
         const valueType = expect.findTypeOf(value);
         let spec = value;
 
-        if (valueType.is('DOMElement')) {
+        if (valueType.is('expect.it')) {
+          throw new Error(
+            'Unsupported value for "to contain" assertion: expect.it'
+          );
+        } else if (valueType.is('DOMElement')) {
           spec = convertDOMNodeToSatisfySpec(value, isHtml);
         } else if (valueType.is('string')) {
           const documentFragment = isHtml

test/index.spec.js

@@ -2513,6 +2513,67 @@ describe('unexpected-dom', () => {
       `
       );
     });
+
+    describe('when used with expect.it', () => {
+      it('succeeds if the given structure is present', () => {
+        expect(
+          parseHtmlNode('<div class="foobar"></div>'),
+          'to satisfy',
+          expect.it('to have attributes', 'class')
+        );
+      });
+
+      it('fails with a diff if the given structure is absent', () => {
+        expect(
+          () =>
+            expect(
+              parseHtmlNode('<div></div>'),
+              'to satisfy',
+              expect.it('to have attributes', 'class')
+            ),
+          'to throw an error satisfying to equal snapshot',
+          expect.unindent`
+            expected <div></div> to have attributes 'class'
+
+            <div
+              // missing class
+            ></div>
+          `
+        );
+      });
+
+      it('succeeds with a negated assertion', () => {
+        expect(
+          parseHtmlNode('<div></div>'),
+          'to satisfy',
+          expect.it('not to have attributes', 'class')
+        );
+      });
+
+      it('succeeds when used as the name option', () => {
+        expect(parseHtmlNode('<my-foo-bar></my-foo-bar>'), 'to satisfy', {
+          name: expect.it(value => value.indexOf('-').length === 2)
+        });
+      });
+
+      it('succeeds when used as the children option', () => {
+        expect(
+          parseHtmlNode(
+            '<div><i>Hello</i> <span class="name something-else">Jane Doe</span></div>'
+          ),
+          'to satisfy',
+          {
+            children: expect.it('to have length', 3)
+          }
+        );
+      });
+
+      it('succeeds when used as the textContent option', () => {
+        expect(parseHtmlNode('<div>bar foo</div>'), 'to satisfy', {
+          textContent: expect.it('not to start with', 'foo')
+        });
+      });
+    });
   });
 
   describe('queried for', () => {
@@ -3510,6 +3571,22 @@ describe('unexpected-dom', () => {
       });
     });
 
+    describe('when used with expect.it', () => {
+      it('fails with an unsupported message at the top-level', () => {
+        expect(
+          () => {
+            expect(
+              parseHtmlNode('<div></div>'),
+              'to contain',
+              expect.it('not to have attributes', 'class')
+            );
+          },
+          'to throw',
+          'Unsupported value for "to contain" assertion: expect.it'
+        );
+      });
+    });
+
     it('supports only stating a subset of the classes', () => {
       expect(
         '<div><i class="greeting">Hello</i> <span class="name something-else and-this">Jane Doe</span></div>',