Update dependency @testing-library/jest-dom to v5.13.0

.changeset/early-foxes-sell.md

@@ -0,0 +1,5 @@
+---
+'pleasantest': minor
+---
+
+New `jest-dom` matcher: `toHaveErrorMessage`

README.md

@@ -660,7 +660,8 @@ Pleasantest adds [`jest-dom`'s matchers](https://github.com/testing-library/jest
 
 List of matchers:
 
-[`toBeDisabled`](https://github.com/testing-library/jest-dom#tobedisabled), [`toBeEnabled`](https://github.com/testing-library/jest-dom#tobeenabled), [`toBeEmpty`](https://github.com/testing-library/jest-dom#tobeempty), [`toBeEmptyDOMElement`](https://github.com/testing-library/jest-dom#tobeemptydomelement), [`toBeInTheDocument`](https://github.com/testing-library/jest-dom#tobeinthedocument), [`toBeInvalid`](https://github.com/testing-library/jest-dom#tobeinvalid), [`toBeRequired`](https://github.com/testing-library/jest-dom#toberequired), [`toBeValid`](https://github.com/testing-library/jest-dom#tobevalid), [`toBeVisible`](https://github.com/testing-library/jest-dom#tobevisible), [`toContainElement`](https://github.com/testing-library/jest-dom#tocontainelement), [`toContainHTML`](https://github.com/testing-library/jest-dom#tocontainhtml), [`toHaveAttribute`](https://github.com/testing-library/jest-dom#tohaveattribute), [`toHaveClass`](https://github.com/testing-library/jest-dom#tohaveclass), [`toHaveFocus`](https://github.com/testing-library/jest-dom#tohavefocus), [`toHaveFormValues`](https://github.com/testing-library/jest-dom#tohaveformvalues), [`toHaveStyle`](https://github.com/testing-library/jest-dom#tohavestyle), [`toHaveTextContent`](https://github.com/testing-library/jest-dom#tohavetextcontent), [`toHaveValue`](https://github.com/testing-library/jest-dom#tohavevalue), [`toHaveDisplayValue`](https://github.com/testing-library/jest-dom#tohavedisplayvalue), [`toBeChecked`](https://github.com/testing-library/jest-dom#tobechecked), [`toBePartiallyChecked`](https://github.com/testing-library/jest-dom#tobepartiallychecked), [`toHaveDescription`](https://github.com/testing-library/jest-dom#tohavedescription).
+[`toBeDisabled`](https://github.com/testing-library/jest-dom#tobedisabled), [`toBeEnabled`](https://github.com/testing-library/jest-dom#tobeenabled), [`toBeEmpty`](https://github.com/testing-library/jest-dom#tobeempty), [`toBeEmptyDOMElement`](https://github.com/testing-library/jest-dom#tobeemptydomelement), [`toBeInTheDocument`](https://github.com/testing-library/jest-dom#tobeinthedocument), [`toBeInvalid`](https://github.com/testing-library/jest-dom#tobeinvalid), [`toBeRequired`](https://github.com/testing-library/jest-dom#toberequired), [`toBeValid`](https://github.com/testing-library/jest-dom#tobevalid), [`toBeVisible`](https://github.com/testing-library/jest-dom#tobevisible), [`toContainElement`](https://github.com/testing-library/jest-dom#tocontainelement), [`toContainHTML`](https://github.com/testing-library/jest-dom#tocontainhtml), [`toHaveAttribute`](https://github.com/testing-library/jest-dom#tohaveattribute), [`toHaveClass`](https://github.com/testing-library/jest-dom#tohaveclass), [`toHaveFocus`](https://github.com/testing-library/jest-dom#tohavefocus), [`toHaveFormValues`](https://github.com/testing-library/jest-dom#tohaveformvalues), [`toHaveStyle`](https://github.com/testing-library/jest-dom#tohavestyle), [`toHaveTextContent`](https://github.com/testing-library/jest-dom#tohavetextcontent), [`toHaveValue`](https://github.com/testing-library/jest-dom#tohavevalue), [`toHaveDisplayValue`](https://github.com/testing-library/jest-dom#tohavedisplayvalue), [`toBeChecked`](https://github.com/testing-library/jest-dom#tobechecked), [`toBePartiallyChecked`](https://github.com/testing-library/jest-dom#tobepartiallychecked), [`toHaveDescription`](https://github.com/testing-library/jest-dom#tohavedescription), [`toHaveErrorMessage`](https://github.com/testing-library/jest-dom#tohaveerrormessage).
+.
 
 > :warning: **Don't forget to `await` matchers!** This is necessary because the matchers execute in the browser. If you forget, your matchers may execute after your test finishes, and you may get obscure errors.
 

package.json

@@ -17,7 +17,7 @@
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-node-resolve": "11.2.1",
     "@testing-library/dom": "7.31.2",
-    "@testing-library/jest-dom": "5.12.0",
+    "@testing-library/jest-dom": "5.13.0",
     "@types/jest": "26.0.23",
     "@types/node": "15.6.1",
     "@types/puppeteer": "5.4.3",

src/extend-expect.ts

@@ -27,6 +27,7 @@ const methods = [
   'toBeChecked',
   'toBePartiallyChecked',
   'toHaveDescription',
+  'toHaveErrorMessage',
 ] as const;
 
 const isJSHandle = (input: unknown): input is JSHandle => {
@@ -382,6 +383,12 @@ declare global {
        * https://github.com/testing-library/jest-dom#tohavedescription
        */
       toHaveDescription(text?: string | RegExp): Promise<R>;
+
+      /**
+       * Check whether the given element has an ARIA error message (via aria-errormessage)
+       * https://github.com/testing-library/jest-dom#tohaveerrormessage
+       */
+      toHaveErrorMessage(text: string | RegExp): Promise<R>;
     }
   }
 }

tests/jest-dom-matchers/toHaveErrorMessage.test.ts

@@ -0,0 +1,48 @@
+import { withBrowser } from 'pleasantest';
+
+test(
+  'toHaveErrorMessage',
+  withBrowser(async ({ screen, utils }) => {
+    await utils.injectHTML(`
+      <label for="startTime"> Please enter a start time for the meeting: </label>
+      <input
+        id="startTime"
+        type="text"
+        aria-errormessage="msgID"
+        aria-invalid="true"
+        value="11:30 PM"
+      />
+      <span id="msgID" aria-live="assertive" style="visibility:visible">
+        Invalid time: the time must be between 9:00 AM and 5:00 PM
+      </span>
+    `);
+
+    const timeInput = await screen.getByLabelText(/start time/i);
+
+    await expect(timeInput).toHaveErrorMessage(
+      'Invalid time: the time must be between 9:00 AM and 5:00 PM',
+    );
+    await expect(timeInput).not.toHaveErrorMessage(
+      'Invalid time', // String performs a full-text match
+    );
+    await expect(
+      expect(timeInput).toHaveErrorMessage(
+        'Invalid time', // String performs a full-text match
+      ),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
+            "expect(element).toHaveErrorMessage()
+
+            Expected the element to have error message:
+              \\"Invalid time\\"
+            Received:
+              \\"Invalid time: the time must be between 9:00 AM and 5:00 PM\\""
+          `);
+
+    // Case insensitive matching
+    await expect(timeInput).toHaveErrorMessage(
+      /^invalid time: the time must be between 9:00 am and 5:00 pm$/i,
+    );
+    // Partial matching
+    await expect(timeInput).toHaveErrorMessage(/Invalid time/);
+  }),
+);