From 247560b4934a064c7c3418800185a096b13da1e8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 12:35:11 -0400
Subject: [PATCH 01/22] scaffold jest matchers

---
 tools/jest-matchers/README.md                 | 20 +++++++++++++
 tools/jest-matchers/package.json              | 29 +++++++++++++++++++
 tools/jest-matchers/src/index.ts              |  3 ++
 tools/jest-matchers/src/matchers/index.ts     |  1 +
 .../src/matchers/toBeLabelled.ts              |  8 +++++
 .../jest-matchers/src/utils/createMatcher.ts  |  5 ++++
 tools/jest-matchers/tsconfig.json             | 13 +++++++++
 tools/test/config/common.setup.js             |  1 +
 tools/test/package.json                       |  1 +
 9 files changed, 81 insertions(+)
 create mode 100644 tools/jest-matchers/README.md
 create mode 100644 tools/jest-matchers/package.json
 create mode 100644 tools/jest-matchers/src/index.ts
 create mode 100644 tools/jest-matchers/src/matchers/index.ts
 create mode 100644 tools/jest-matchers/src/matchers/toBeLabelled.ts
 create mode 100644 tools/jest-matchers/src/utils/createMatcher.ts
 create mode 100644 tools/jest-matchers/tsconfig.json

diff --git a/tools/jest-matchers/README.md b/tools/jest-matchers/README.md
new file mode 100644
index 0000000000..2cf1306a1c
--- /dev/null
+++ b/tools/jest-matchers/README.md
@@ -0,0 +1,20 @@
+
+# Jest Matchers
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/jest-matchers.svg)
+#### [View on MongoDB.design](https://www.mongodb.design/component/jest-matchers/example/)
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/jest-matchers
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/jest-matchers
+```
+
diff --git a/tools/jest-matchers/package.json b/tools/jest-matchers/package.json
new file mode 100644
index 0000000000..046e487e06
--- /dev/null
+++ b/tools/jest-matchers/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@lg-tools/jest-matchers",
+  "version": "0.0.1",
+  "description": "LeafyGreen UI Kit Jest Matchers",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "jest": "^29.6.2",
+    "@types/jest": "^29.5.3"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/jest-matchers",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}
diff --git a/tools/jest-matchers/src/index.ts b/tools/jest-matchers/src/index.ts
new file mode 100644
index 0000000000..67df2d899f
--- /dev/null
+++ b/tools/jest-matchers/src/index.ts
@@ -0,0 +1,3 @@
+import * as matchers from './matchers';
+
+expect.extend(matchers);
diff --git a/tools/jest-matchers/src/matchers/index.ts b/tools/jest-matchers/src/matchers/index.ts
new file mode 100644
index 0000000000..56d94f494b
--- /dev/null
+++ b/tools/jest-matchers/src/matchers/index.ts
@@ -0,0 +1 @@
+export { toBeLabelled } from './toBeLabelled';
diff --git a/tools/jest-matchers/src/matchers/toBeLabelled.ts b/tools/jest-matchers/src/matchers/toBeLabelled.ts
new file mode 100644
index 0000000000..10a65b076a
--- /dev/null
+++ b/tools/jest-matchers/src/matchers/toBeLabelled.ts
@@ -0,0 +1,8 @@
+import { createMatcher } from '../utils/createMatcher';
+
+export const toBeLabelled = createMatcher((element: Element) => {
+  return {
+    pass: true,
+    message: () => '',
+  };
+});
diff --git a/tools/jest-matchers/src/utils/createMatcher.ts b/tools/jest-matchers/src/utils/createMatcher.ts
new file mode 100644
index 0000000000..e12002d3a0
--- /dev/null
+++ b/tools/jest-matchers/src/utils/createMatcher.ts
@@ -0,0 +1,5 @@
+export const createMatcher = (
+  matcher: jest.CustomMatcher,
+): jest.CustomMatcher => {
+  return matcher;
+};
diff --git a/tools/jest-matchers/tsconfig.json b/tools/jest-matchers/tsconfig.json
new file mode 100644
index 0000000000..0e81d75f2d
--- /dev/null
+++ b/tools/jest-matchers/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "@lg-tools/build/config/package.tsconfig.json",
+   "compilerOptions": {
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": ["**/*.spec.*", "**/*.story.*"],
+}
diff --git a/tools/test/config/common.setup.js b/tools/test/config/common.setup.js
index 1b069331fa..08f4ebeef8 100644
--- a/tools/test/config/common.setup.js
+++ b/tools/test/config/common.setup.js
@@ -1,4 +1,5 @@
 require('@testing-library/jest-dom');
+require('@lg-tools/jest-matchers');
 
 const { toHaveNoViolations } = require('jest-axe');
 expect.extend(toHaveNoViolations);
diff --git a/tools/test/package.json b/tools/test/package.json
index 1d61d677ba..13a9fb671a 100644
--- a/tools/test/package.json
+++ b/tools/test/package.json
@@ -18,6 +18,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/server": "11.11.0",
     "@lg-tools/build": "0.3.0",
+    "@lg-tools/jest-matchers": "0.0.1",
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",

From 872b7cd3d15bb93bdd4f4a27ef463db80dbab1cc Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 12:54:27 -0400
Subject: [PATCH 02/22] creates `createMatcher` script

---
 tools/jest-matchers/package.json              | 15 ++++--
 .../jest-matchers/scripts/createNewMatcher.ts | 46 +++++++++++++++++++
 tools/jest-matchers/scripts/tsconfig.json     | 21 +++++++++
 tools/jest-matchers/tsconfig.json             |  2 +-
 yarn.lock                                     | 13 ++++--
 5 files changed, 89 insertions(+), 8 deletions(-)
 create mode 100644 tools/jest-matchers/scripts/createNewMatcher.ts
 create mode 100644 tools/jest-matchers/scripts/tsconfig.json

diff --git a/tools/jest-matchers/package.json b/tools/jest-matchers/package.json
index 046e487e06..e854e6e434 100644
--- a/tools/jest-matchers/package.json
+++ b/tools/jest-matchers/package.json
@@ -9,14 +9,23 @@
   "scripts": {
     "build": "lg build-package",
     "tsc": "lg build-ts",
-    "docs": "lg build-tsdoc"
+    "docs": "lg build-tsdoc",
+    "create-matcher": "npx ts-node ./scripts/createNewMatcher.ts"
   },
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "chalk": "4.1.2",
+    "commander": "^11.1.0",
+    "fs-extra": "^11.1.1"
+  },
   "peerDependencies": {
-    "jest": "^29.6.2",
-    "@types/jest": "^29.5.3"
+    "@types/jest": "^29.5.3",
+    "jest": "^29.6.2"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/jest-matchers",
   "repository": {
diff --git a/tools/jest-matchers/scripts/createNewMatcher.ts b/tools/jest-matchers/scripts/createNewMatcher.ts
new file mode 100644
index 0000000000..d3e8474ea0
--- /dev/null
+++ b/tools/jest-matchers/scripts/createNewMatcher.ts
@@ -0,0 +1,46 @@
+import { Command } from 'commander';
+import chalk from 'chalk';
+import path from 'path';
+import fse from 'fs-extra';
+import { camelCase, lowerFirst } from 'lodash';
+
+const cli = new Command();
+cli
+  .argument('<matcher-name>', 'The name of the new matcher')
+  .action(createNewMatcher)
+  .parse();
+
+function createNewMatcher(matcherName: string) {
+  matcherName = lowerFirst(camelCase(matcherName));
+
+  if (!matcherName.startsWith('to')) {
+    console.warn(
+      chalk.yellow(
+        `Matcher names should start with the word "to". Received \`${matcherName}\``,
+      ),
+    );
+  }
+
+  const matchersDir = path.resolve(__dirname, '../src/matchers');
+  const matchersFilePath = path.resolve(matchersDir, matcherName + '.ts');
+
+  const matcherFileTemplate = `
+import { createMatcher } from '../utils/createMatcher';
+
+export const ${matcherName} = createMatcher((element: Element) => {
+  return {
+    pass: true,
+    message: () => '',
+  };
+});
+`;
+
+  fse.writeFileSync(matchersFilePath, matcherFileTemplate);
+
+  const indexFilePath = path.resolve(matchersDir, 'index.ts');
+
+  let indexContents = fse.readFileSync(indexFilePath, 'utf-8');
+  indexContents += `export { ${matcherName} } from './${matcherName}';\n`;
+
+  fse.writeFileSync(indexFilePath, indexContents);
+}
diff --git a/tools/jest-matchers/scripts/tsconfig.json b/tools/jest-matchers/scripts/tsconfig.json
new file mode 100644
index 0000000000..d8ad23ab66
--- /dev/null
+++ b/tools/jest-matchers/scripts/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "noEmit": true,
+    "tsBuildInfoFile": "./tsconfig.tsbuildinfo",
+    "incremental": true,
+    "target": "ES5",
+    "jsx": "react",
+    "allowJs": true,
+    "pretty": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": false,
+    "esModuleInterop": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+  }
+}
\ No newline at end of file
diff --git a/tools/jest-matchers/tsconfig.json b/tools/jest-matchers/tsconfig.json
index 0e81d75f2d..c2eb55349d 100644
--- a/tools/jest-matchers/tsconfig.json
+++ b/tools/jest-matchers/tsconfig.json
@@ -9,5 +9,5 @@
   "include": [
     "src/**/*"
   ],
-  "exclude": ["**/*.spec.*", "**/*.story.*"],
+  "exclude": ["**/*.spec.*", "**/*.story.*", "src/tests"],
 }
diff --git a/yarn.lock b/yarn.lock
index 4c4040c9e5..330241f4f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5521,9 +5521,9 @@ camelcase@^7.0.0:
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
 caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001517:
-  version "1.0.30001519"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
-  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
+  version "1.0.30001554"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz#ba80d88dff9acbc0cd4b7535fc30e0191c5e2e2a"
+  integrity sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -5759,6 +5759,11 @@ commander@^11.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-11.0.0.tgz#43e19c25dbedc8256203538e8d7e9346877a6f67"
   integrity sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==
 
+commander@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906"
+  integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==
+
 commander@^2.18.0, commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -7441,7 +7446,7 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-extra@11.1.1, fs-extra@^11.1.0:
+fs-extra@11.1.1, fs-extra@^11.1.0, fs-extra@^11.1.1:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.1.tgz#da69f7c39f3b002378b0954bb6ae7efdc0876e2d"
   integrity sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==

From b2159ad69ec13618a73fc016c02915915f78bd84 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 13:51:42 -0400
Subject: [PATCH 03/22] creates `toBeLabelled` matcher

---
 .../src/matchers/toBeLabelled.ts              | 50 +++++++++++++++++--
 .../src/tests/toBeLabelled.spec.ts            | 48 ++++++++++++++++++
 .../src/tests/utils/test-utils.ts             | 29 +++++++++++
 3 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 tools/jest-matchers/src/tests/toBeLabelled.spec.ts
 create mode 100644 tools/jest-matchers/src/tests/utils/test-utils.ts

diff --git a/tools/jest-matchers/src/matchers/toBeLabelled.ts b/tools/jest-matchers/src/matchers/toBeLabelled.ts
index 10a65b076a..b5d732afeb 100644
--- a/tools/jest-matchers/src/matchers/toBeLabelled.ts
+++ b/tools/jest-matchers/src/matchers/toBeLabelled.ts
@@ -1,8 +1,52 @@
+import { isNull } from 'lodash';
 import { createMatcher } from '../utils/createMatcher';
 
-export const toBeLabelled = createMatcher((element: Element) => {
+const isValidString = (str: any): str is string =>
+  str && typeof str === 'string' && str.length > 0;
+
+/**
+ * Returns whether the provided element has any of the following:
+ * - a `label` attribute
+ * - an `aria-label` attribute
+ * - an `aria-labelledby` attribute with a valid associated element
+ * - an associated element `<label>` element with the appropriate `for` attribute
+ */
+export const toBeLabelled = createMatcher(function (element: Element) {
+  const label = element.getAttribute('label');
+  const ariaLabel = element.getAttribute('aria-label');
+  const ariaLabelledBy = element.getAttribute('aria-labelledby');
+  const elementId = element.getAttribute('id');
+
+  // If at least one...
+  const hasStaticLabel = [label, ariaLabel].some(isValidString);
+
+  const hasLabelReference = isValidString(ariaLabelledBy);
+  const doesAriaLabelledByReferenceExist =
+    hasLabelReference && !isNull(document.querySelector(`#${ariaLabelledBy}`));
+  const hasLabelForId =
+    elementId && !isNull(document.querySelector(`label[for="${elementId}"]`));
+
+  const pass = Boolean(
+    hasStaticLabel || doesAriaLabelledByReferenceExist || hasLabelForId,
+  );
+
+  const message = () => {
+    if (!pass && hasLabelReference) {
+      return this.isNot
+        ? `Expected to not find element with id ${ariaLabelledBy}`
+        : `Could not find element referenced by \`aria-labelledby\`` +
+            document.body.innerHTML;
+    }
+    if (!pass && elementId) {
+      return this.isNot
+        ? `Expected not to find label for ${elementId}`
+        : `Could not find a label for the element with id ${elementId}`;
+    }
+    return `Expected the element ${this.isNot ? 'not ' : ''}to have a label`;
+  };
+
   return {
-    pass: true,
-    message: () => '',
+    pass,
+    message,
   };
 });
diff --git a/tools/jest-matchers/src/tests/toBeLabelled.spec.ts b/tools/jest-matchers/src/tests/toBeLabelled.spec.ts
new file mode 100644
index 0000000000..9607627f0b
--- /dev/null
+++ b/tools/jest-matchers/src/tests/toBeLabelled.spec.ts
@@ -0,0 +1,48 @@
+import { render } from './utils/test-utils';
+
+describe('tools/jest-matchers/.toBeLabelled', () => {
+  test('unlabelled', () => {
+    const { queryByTestId } = render(`
+      <input type="text" data-testid="unlabelled" />
+    `);
+    expect(queryByTestId('unlabelled')).not.toBeLabelled();
+  });
+
+  test('`label` attribute', () => {
+    const { queryByTestId } = render(`
+      <input label="label" type="text" data-testid="labelled" />
+    `);
+
+    expect(queryByTestId('labelled')).toBeLabelled();
+  });
+
+  test('`aria-label` attribute', () => {
+    const { queryByTestId } = render(`
+      <input aria-label="label" type="text" data-testid="labelled" />
+    `);
+
+    expect(queryByTestId('labelled')).toBeLabelled();
+  });
+
+  test('`aria-labelledby` attribute', () => {
+    const { queryByTestId } = render(`
+      <label id="label-id">Text</label>
+      <input aria-labelledby="label-id" type="text" data-testid="labelled" />
+      <input aria-labelledby="invalid" type="text" data-testid="unlabelled" />
+    `);
+
+    expect(queryByTestId('labelled')).toBeLabelled();
+    expect(queryByTestId('unlabelled')).not.toBeLabelled();
+  });
+
+  test('`for` attribute', () => {
+    const { queryByTestId } = render(`
+      <label for="input-id">Text</label>
+      <input id="input-id" type="text" data-testid="labelled" />
+      <input id="invalid" type="text" data-testid="unlabelled" />
+    `);
+
+    expect(queryByTestId('labelled')).toBeLabelled();
+    expect(queryByTestId('unlabelled')).not.toBeLabelled();
+  });
+});
diff --git a/tools/jest-matchers/src/tests/utils/test-utils.ts b/tools/jest-matchers/src/tests/utils/test-utils.ts
new file mode 100644
index 0000000000..1e582c8d8d
--- /dev/null
+++ b/tools/jest-matchers/src/tests/utils/test-utils.ts
@@ -0,0 +1,29 @@
+const document = (() => {
+  if (global.document) {
+    return global.document;
+  } else {
+    const { JSDOM } = require('jsdom');
+    const { window } = new JSDOM();
+
+    return window.document;
+  }
+})();
+
+function render(html: string) {
+  const container = document.createElement('div');
+  container.innerHTML = html;
+  const queryByTestId = (testId: string) =>
+    container.querySelector(`[data-testid="${testId}"]`);
+  // asFragment has been stolen from react-testing-library
+  const asFragment = () =>
+    document.createRange().createContextualFragment(container.innerHTML);
+
+  // Some tests need to look up global ids with document.getElementById()
+  // so we need to be inside an actual document.
+  document.body.innerHTML = '';
+  document.body.appendChild(container);
+
+  return { container, queryByTestId, asFragment };
+}
+
+export { render };

From 34f991e5f401907dfe15e790bfcdd5585adbb116 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 13:52:24 -0400
Subject: [PATCH 04/22] updates creator function

---
 tools/jest-matchers/scripts/createNewMatcher.ts  | 2 +-
 tools/jest-matchers/src/matchers/toBeLabelled.ts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/tools/jest-matchers/scripts/createNewMatcher.ts b/tools/jest-matchers/scripts/createNewMatcher.ts
index d3e8474ea0..12b88a7d7f 100644
--- a/tools/jest-matchers/scripts/createNewMatcher.ts
+++ b/tools/jest-matchers/scripts/createNewMatcher.ts
@@ -27,7 +27,7 @@ function createNewMatcher(matcherName: string) {
   const matcherFileTemplate = `
 import { createMatcher } from '../utils/createMatcher';
 
-export const ${matcherName} = createMatcher((element: Element) => {
+export const ${matcherName} = createMatcher(function _${matcherName}(element: Element) {
   return {
     pass: true,
     message: () => '',
diff --git a/tools/jest-matchers/src/matchers/toBeLabelled.ts b/tools/jest-matchers/src/matchers/toBeLabelled.ts
index b5d732afeb..4a6fe8c97a 100644
--- a/tools/jest-matchers/src/matchers/toBeLabelled.ts
+++ b/tools/jest-matchers/src/matchers/toBeLabelled.ts
@@ -11,7 +11,9 @@ const isValidString = (str: any): str is string =>
  * - an `aria-labelledby` attribute with a valid associated element
  * - an associated element `<label>` element with the appropriate `for` attribute
  */
-export const toBeLabelled = createMatcher(function (element: Element) {
+export const toBeLabelled = createMatcher(function _toBeLabelled(
+  element: Element,
+) {
   const label = element.getAttribute('label');
   const ariaLabel = element.getAttribute('aria-label');
   const ariaLabelledBy = element.getAttribute('aria-labelledby');

From ad0b5112764f2631dbf6bf4fe438a70a65de1d91 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 14:02:40 -0400
Subject: [PATCH 05/22] Update createNewMatcher.ts

---
 .../jest-matchers/scripts/createNewMatcher.ts | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/tools/jest-matchers/scripts/createNewMatcher.ts b/tools/jest-matchers/scripts/createNewMatcher.ts
index 12b88a7d7f..69b11121db 100644
--- a/tools/jest-matchers/scripts/createNewMatcher.ts
+++ b/tools/jest-matchers/scripts/createNewMatcher.ts
@@ -22,25 +22,39 @@ function createNewMatcher(matcherName: string) {
   }
 
   const matchersDir = path.resolve(__dirname, '../src/matchers');
-  const matchersFilePath = path.resolve(matchersDir, matcherName + '.ts');
 
+  /** Create the matcher file */
+  const matchersFilePath = path.resolve(matchersDir, matcherName + '.ts');
   const matcherFileTemplate = `
 import { createMatcher } from '../utils/createMatcher';
 
-export const ${matcherName} = createMatcher(function _${matcherName}(element: Element) {
+export const ${matcherName} = createMatcher(function _${matcherName}() {
   return {
     pass: true,
     message: () => '',
   };
 });
 `;
-
   fse.writeFileSync(matchersFilePath, matcherFileTemplate);
 
-  const indexFilePath = path.resolve(matchersDir, 'index.ts');
+  /** Create the test file */
+
+  const testFilePath = path.resolve(
+    __dirname,
+    '../src/tests',
+    matcherName + '.spec.ts',
+  );
 
+  const testFileTemplate = `
+describe('tools/jest-matchers/.${matcherName}', () => {
+  test.todo('')
+})
+`;
+  fse.writeFileSync(testFilePath, testFileTemplate);
+
+  /** Update the matchers index file */
+  const indexFilePath = path.resolve(matchersDir, 'index.ts');
   let indexContents = fse.readFileSync(indexFilePath, 'utf-8');
   indexContents += `export { ${matcherName} } from './${matcherName}';\n`;
-
   fse.writeFileSync(indexFilePath, indexContents);
 }

From 18e41457d32ccd1c5854d0ed1ac266a4870eb664 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 17:06:47 -0400
Subject: [PATCH 06/22] creates `toSpreadRest`

---
 tools/jest-matchers/package.json              |  2 +-
 tools/jest-matchers/src/matchers/index.ts     |  1 +
 .../src/matchers/toBeLabelled.ts              |  2 +-
 .../src/matchers/toSpreadRest.tsx             | 44 +++++++++++++++++++
 .../src/tests/toSpreadRest.spec.tsx           | 23 ++++++++++
 tools/jest-matchers/tsconfig.json             |  1 +
 6 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 tools/jest-matchers/src/matchers/toSpreadRest.tsx
 create mode 100644 tools/jest-matchers/src/tests/toSpreadRest.spec.tsx

diff --git a/tools/jest-matchers/package.json b/tools/jest-matchers/package.json
index e854e6e434..15323311ef 100644
--- a/tools/jest-matchers/package.json
+++ b/tools/jest-matchers/package.json
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "dependencies": {
+    "chalk": "4.1.2",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "chalk": "4.1.2",
     "commander": "^11.1.0",
     "fs-extra": "^11.1.1"
   },
diff --git a/tools/jest-matchers/src/matchers/index.ts b/tools/jest-matchers/src/matchers/index.ts
index 56d94f494b..e01e47eac2 100644
--- a/tools/jest-matchers/src/matchers/index.ts
+++ b/tools/jest-matchers/src/matchers/index.ts
@@ -1 +1,2 @@
 export { toBeLabelled } from './toBeLabelled';
+export { toSpreadRest } from './toSpreadRest';
diff --git a/tools/jest-matchers/src/matchers/toBeLabelled.ts b/tools/jest-matchers/src/matchers/toBeLabelled.ts
index 4a6fe8c97a..e9e0b5b482 100644
--- a/tools/jest-matchers/src/matchers/toBeLabelled.ts
+++ b/tools/jest-matchers/src/matchers/toBeLabelled.ts
@@ -5,7 +5,7 @@ const isValidString = (str: any): str is string =>
   str && typeof str === 'string' && str.length > 0;
 
 /**
- * Returns whether the provided element has any of the following:
+ * Returns whether the provided element has at least one of the following:
  * - a `label` attribute
  * - an `aria-label` attribute
  * - an `aria-labelledby` attribute with a valid associated element
diff --git a/tools/jest-matchers/src/matchers/toSpreadRest.tsx b/tools/jest-matchers/src/matchers/toSpreadRest.tsx
new file mode 100644
index 0000000000..0264e2cd7e
--- /dev/null
+++ b/tools/jest-matchers/src/matchers/toSpreadRest.tsx
@@ -0,0 +1,44 @@
+import chalk from 'chalk';
+import React from 'react';
+import { render } from '@testing-library/react';
+import { createMatcher } from '../utils/createMatcher';
+
+/**
+ * Tests whether a Component
+ */
+export const toSpreadRest = createMatcher(function _toSpreadRest(
+  Component: React.ReactElement,
+) {
+  const rest = {
+    'data-rest': 'value',
+  };
+
+  // @ts-expect-error Type of Component props is unknown
+  const renderResult = render(<Component {...rest} />);
+  const componentElement = renderResult.container.firstElementChild;
+
+  const renderedAttributeKeys = componentElement?.getAttributeNames();
+
+  const areAllRestPropsRendered = Object.keys(rest).every(prop =>
+    renderedAttributeKeys?.includes(prop),
+  );
+
+  const areAllAttributeValuesCorrect =
+    areAllRestPropsRendered &&
+    Object.entries(rest).every(restProp => {
+      const attr = componentElement?.getAttribute(restProp[0]);
+      return attr === restProp[1];
+    });
+
+  const pass = areAllAttributeValuesCorrect;
+
+  return {
+    pass,
+    message: () =>
+      `Expected component to ${this.isNot ? 'not ' : ''}spread rest.\n` +
+      chalk.bold.green(
+        `Expected attributes:\n${Object.keys(rest).join(', ')}\n\n`,
+      ) +
+      chalk.bold.red(`Received props:\n${renderedAttributeKeys?.join(', ')}`),
+  };
+});
diff --git a/tools/jest-matchers/src/tests/toSpreadRest.spec.tsx b/tools/jest-matchers/src/tests/toSpreadRest.spec.tsx
new file mode 100644
index 0000000000..eb115f196a
--- /dev/null
+++ b/tools/jest-matchers/src/tests/toSpreadRest.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+describe('tools/jest-matchers/.toSpreadRest', () => {
+  test('spreads rest', () => {
+    const Component = (props: React.ComponentProps<'div'>) => {
+      return (
+        <div id="some-id" {...props}>
+          Children
+        </div>
+      );
+    };
+
+    expect(Component).toSpreadRest();
+  });
+
+  test('does not spread rest', () => {
+    const Component = (props: React.ComponentProps<'div'>) => {
+      return <div id="some-id">Children</div>;
+    };
+
+    expect(Component).not.toSpreadRest();
+  });
+});
diff --git a/tools/jest-matchers/tsconfig.json b/tools/jest-matchers/tsconfig.json
index c2eb55349d..d8c5c732da 100644
--- a/tools/jest-matchers/tsconfig.json
+++ b/tools/jest-matchers/tsconfig.json
@@ -5,6 +5,7 @@
     "outDir": "dist",
     "rootDir": "src",
     "baseUrl": ".",
+    "noUnusedLocals": false
   },
   "include": [
     "src/**/*"

From 7e6a1aaaf0728489273e855c34efa105194f517d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 17:07:50 -0400
Subject: [PATCH 07/22] Update package.json

---
 tools/jest-matchers/package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/tools/jest-matchers/package.json b/tools/jest-matchers/package.json
index 15323311ef..2d27212c9b 100644
--- a/tools/jest-matchers/package.json
+++ b/tools/jest-matchers/package.json
@@ -24,8 +24,9 @@
     "fs-extra": "^11.1.1"
   },
   "peerDependencies": {
-    "@types/jest": "^29.5.3",
-    "jest": "^29.6.2"
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
+    "jest": "^29.6.0"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/jest-matchers",
   "repository": {

From 259e70acf5aacb3dc28457c600af38fa294121a8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 17:48:22 -0400
Subject: [PATCH 08/22] updates dependency validation checker

---
 tools/validate/src/dependencies/config.ts     | 17 +++++++---
 .../validate/src/dependencies/utils/index.ts  | 32 ++++++++++++-------
 .../validateListedDependencies.ts             |  4 +--
 .../validateListedDevDependencies.ts          | 27 +++++++++-------
 4 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/tools/validate/src/dependencies/config.ts b/tools/validate/src/dependencies/config.ts
index b07af2908d..5075290ad0 100644
--- a/tools/validate/src/dependencies/config.ts
+++ b/tools/validate/src/dependencies/config.ts
@@ -18,8 +18,8 @@ export interface DependencyIssues {
   isMissingPeers: boolean;
 }
 
-// We won't check dependencies imported by files matching these patterns
-export const ignoreFilePatterns: Array<RegExp> = [
+/** We treat dependencies imported by files matching these patterns as devDependencies */
+export const devFilePatterns: Array<RegExp> = [
   /.*scripts\/.*/,
   /.*.stories.js/,
   /.*.spec.tsx?/,
@@ -30,8 +30,15 @@ export const ignoreFilePatterns: Array<RegExp> = [
   /.*\/dist\/.*/,
 ];
 
-// these dependencies will be ignored when listed in a package.json
-export const ignoreMatches = [
+/** If a dependency is flagged as bing imported by one of these files, ignore it */
+export const ignoreFilePatterns: Array<RegExp> = [
+  /.*package.json?/,
+  /.*README.md/,
+  /.*CHANGELOG.md/,
+];
+
+/** these dependencies will be ignored when listed in a package.json */
+export const ignoreDependencies = [
   '@leafygreen-ui/mongo-nav',
   '@babel/*',
   '@emotion/*',
@@ -55,5 +62,5 @@ export const ignoreMatches = [
 ];
 
 export const depcheckOptions: depcheck.Options = {
-  ignoreMatches,
+  ignoreMatches: ignoreDependencies,
 };
diff --git a/tools/validate/src/dependencies/utils/index.ts b/tools/validate/src/dependencies/utils/index.ts
index 6019741d9b..9e5901c0ee 100644
--- a/tools/validate/src/dependencies/utils/index.ts
+++ b/tools/validate/src/dependencies/utils/index.ts
@@ -5,7 +5,11 @@ import { readFileSync, writeFileSync } from 'fs-extra';
 import { isEqual } from 'lodash';
 import path from 'path';
 
-import { ignoreFilePatterns, ignoreMatches } from '../config';
+import {
+  devFilePatterns,
+  ignoreDependencies,
+  ignoreFilePatterns,
+} from '../config';
 
 import { getPackageLGDependencies } from './getPackageDependencies';
 
@@ -58,18 +62,22 @@ export function sortDependenciesByUsage(
       // If a dependency is only used in tests or storybook,
       // then we add it as a dev dependency
       .reduce(
-        (_missing, [name, fileUsedIn]) => {
-          if (
-            // If every file used in is a test file...
-            fileUsedIn.every(file =>
-              ignoreFilePatterns.some(pattern => pattern.test(file)),
-            )
-          ) {
+        (_missing, [name, filesUsedIn]) => {
+          // If every file used in is a test file...
+          const isDepOnlyUsedInDevFiles = filesUsedIn.every(file =>
+            devFilePatterns.some(pattern => pattern.test(file)),
+          );
+
+          const isDepOnlyInIgnoredFiles = filesUsedIn.every(file =>
+            ignoreFilePatterns.some(pattern => pattern.test(file)),
+          );
+
+          if (isDepOnlyUsedInDevFiles) {
             // Ignore when we import the package itself in a test file
             if (!name.includes(pkgName)) {
               _missing.devDependencies.push(name);
             }
-          } else {
+          } else if (!isDepOnlyInIgnoredFiles) {
             _missing.dependencies.push(name);
           }
 
@@ -98,11 +106,11 @@ export const isDependencyUsedInSourceFile = (
   importedPackages: depcheck.Results['using'],
 ): boolean => {
   // consider a dependency used in a package file if its in `ignoreMatches`
-  const isIgnored = ignoreMatches.includes(depName);
+  const isIgnored = ignoreDependencies.includes(depName);
   const usedInPackageFile = importedPackages?.[depName]?.some(
     // is used in at least one...
     // file that is not ignored
-    (file: string) => !ignoreFilePatterns.some(pattern => pattern.test(file)),
+    (file: string) => !devFilePatterns.some(pattern => pattern.test(file)),
   );
 
   return isIgnored || usedInPackageFile;
@@ -115,6 +123,6 @@ export const isDependencyOnlyUsedInTestFile = (
 ): boolean => {
   return importedPackages?.[depName]?.every(
     // Every file is a test file
-    (file: string) => ignoreFilePatterns.some(pattern => pattern.test(file)),
+    (file: string) => devFilePatterns.some(pattern => pattern.test(file)),
   );
 };
diff --git a/tools/validate/src/dependencies/validateListedDependencies.ts b/tools/validate/src/dependencies/validateListedDependencies.ts
index 1654f3a945..9aa9797f33 100644
--- a/tools/validate/src/dependencies/validateListedDependencies.ts
+++ b/tools/validate/src/dependencies/validateListedDependencies.ts
@@ -5,7 +5,7 @@ import path from 'path';
 
 import { ValidateCommandOptions } from '../validate.types';
 
-import { DepCheckFunctionProps, ignoreMatches } from './config';
+import { DepCheckFunctionProps, ignoreDependencies } from './config';
 import {
   isDependencyOnlyUsedInTestFile,
   sortDependenciesByUsage,
@@ -38,7 +38,7 @@ export function validateListedDependencies(
     const listedButOnlyUsedAsDev = listedDependencies.filter(
       listedDepName =>
         !importedPackagesInSourceFile.includes(listedDepName) &&
-        !ignoreMatches.includes(listedDepName),
+        !ignoreDependencies.includes(listedDepName),
     );
 
     verbose &&
diff --git a/tools/validate/src/dependencies/validateListedDevDependencies.ts b/tools/validate/src/dependencies/validateListedDevDependencies.ts
index e635693b62..e0062e2a1c 100644
--- a/tools/validate/src/dependencies/validateListedDevDependencies.ts
+++ b/tools/validate/src/dependencies/validateListedDevDependencies.ts
@@ -6,7 +6,7 @@ import path from 'path';
 import { ValidateCommandOptions } from '../validate.types';
 
 import { DepCheckFunctionProps } from './config';
-import { isDependencyUsedInSourceFile, sortDependenciesByUsage } from './utils';
+import { sortDependenciesByUsage } from './utils';
 
 /**
  * Ensure every package listed as a `devDependency`
@@ -21,22 +21,25 @@ export function validateListedDevDependencies(
   options?: Partial<ValidateCommandOptions>,
 ): Array<string> {
   const { verbose } = options ?? { verbose: false };
-  const { devDependencies: importedPackagesInTestFile } =
-    sortDependenciesByUsage(importedPackages, pkgName);
+  const {
+    // devDependencies: importedPackagesInTestFile,
+    dependencies: importedPackagesInSourceFile,
+  } = sortDependenciesByUsage(importedPackages, pkgName);
 
   const { devDependencies: _listedDevObj } = pick(pkgJson, ['devDependencies']);
   const listedDevDependencies = _listedDevObj ? Object.keys(_listedDevObj) : [];
 
   // Check if any devDependency is imported from a source file
-  const isAnyListedDevDepUsedInSourceFile = listedDevDependencies.some(
-    listedDev => isDependencyUsedInSourceFile(listedDev, importedPackages),
+
+  const listedDevButUsedAsDependency = listedDevDependencies.filter(dep =>
+    importedPackagesInSourceFile.includes(dep),
   );
 
-  if (listedDevDependencies.length && isAnyListedDevDepUsedInSourceFile) {
+  const isAnyListedDevDepUsedInSourceFile =
+    listedDevButUsedAsDependency.length > 0;
+
+  if (isAnyListedDevDepUsedInSourceFile) {
     // add the dependencies that are listed as dev but not used as dev to the unused array to uninstall them
-    const listedDevButUsedAsDependency = listedDevDependencies.filter(
-      dep => !importedPackagesInTestFile.includes(dep),
-    );
 
     verbose &&
       console.log(
@@ -49,9 +52,9 @@ export function validateListedDevDependencies(
         listedDevButUsedAsDependency
           .map(
             devDepName =>
-              `\t${chalk.bold(devDepName)} used in: \n\t\t${importedPackages?.[
-                devDepName
-              ]
+              `\t${chalk.bold.yellow(
+                devDepName,
+              )} used in: \n\t\t${importedPackages?.[devDepName]
                 ?.map((file: string) =>
                   file.replace(path.join(__dirname, '..'), ''),
                 )

From 33692c73744ead2e51b292c81aa3ded7dd7bb8dc Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 17:49:03 -0400
Subject: [PATCH 09/22] Create rude-scissors-deliver.md

---
 .changeset/rude-scissors-deliver.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rude-scissors-deliver.md

diff --git a/.changeset/rude-scissors-deliver.md b/.changeset/rude-scissors-deliver.md
new file mode 100644
index 0000000000..d95a0fc79b
--- /dev/null
+++ b/.changeset/rude-scissors-deliver.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/validate': patch
+---
+
+Updates the logic to check whether a dependency is used in a development file

From ecd21b09eae592343cd83918f8f117f20f2e99c1 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 26 Oct 2023 18:06:43 -0400
Subject: [PATCH 10/22] Updates directory checking logic

---
 tools/validate/src/builds/index.ts | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/tools/validate/src/builds/index.ts b/tools/validate/src/builds/index.ts
index 9524b62d13..d160624bae 100644
--- a/tools/validate/src/builds/index.ts
+++ b/tools/validate/src/builds/index.ts
@@ -49,15 +49,16 @@ export const validateBuilds = ({
         return;
       }
 
-      const umdPath = path.resolve(distDir, `index.js`);
-      const esmPath = path.resolve(distDir, `esm/index.js`);
-      const tsPath = path.resolve(distDir, `index.d.ts`);
+      const umdIndex = path.resolve(distDir, `index.js`);
+      const umdExists = fse.existsSync(umdIndex);
+      const isCJSValid = umdExists && getModuleTypes(umdIndex).includes('cjs');
 
-      const umdExists = fse.existsSync(umdPath);
-      const esmExists = fse.existsSync(esmPath);
-      const tsExists = fse.existsSync(tsPath);
-      const isCJSValid = getModuleTypes(umdPath).includes('cjs');
-      const isESMValid = getModuleTypes(esmPath).includes('esm');
+      const esmIndex = path.resolve(distDir, `esm/index.js`);
+      const esmExists = fse.existsSync(esmIndex);
+      const isESMValid = esmExists && getModuleTypes(esmIndex).includes('esm');
+
+      const tsIndex = path.resolve(distDir, `index.d.ts`);
+      const tsExists = fse.existsSync(tsIndex);
 
       verbose &&
         console.log({
@@ -75,7 +76,7 @@ export const validateBuilds = ({
         )
       ) {
         const errorMsg: Array<string> = [
-          chalk.red.bold(`Error in \`${pkgName}\` build:`),
+          chalk.red.bold(`Error in package \`${pkgName}\`:`),
         ];
         if (!umdExists) errorMsg.push(chalk.red('`dist/index.js` not found'));
         if (!esmExists)
@@ -84,16 +85,16 @@ export const validateBuilds = ({
         if (!isCJSValid)
           errorMsg.push(
             chalk.red(`UMD module not valid`),
-            chalk.gray(`(${umdPath})`),
+            chalk.gray(`(${umdIndex})`),
           );
         if (!isESMValid)
           errorMsg.push(
             chalk.red(`ESM module not valid`),
-            chalk.gray(`(${esmPath})`),
+            chalk.gray(`(${esmIndex})`),
           );
 
         if (errorMsg.length > 0) {
-          exit1('Error in builds' + errorMsg.join(' '));
+          exit1(errorMsg.join('\n'));
           return;
         }
       }

From ea79e95bee9ac7be6b98e43cf37ef747ebbf3942 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 27 Oct 2023 12:29:36 -0400
Subject: [PATCH 11/22] fix builds

---
 tools/jest-matchers/package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tools/jest-matchers/package.json b/tools/jest-matchers/package.json
index 2d27212c9b..06b45a6f7f 100644
--- a/tools/jest-matchers/package.json
+++ b/tools/jest-matchers/package.json
@@ -7,9 +7,8 @@
   "types": "./dist/index.d.ts",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "lg build-package",
-    "tsc": "lg build-ts",
-    "docs": "lg build-tsdoc",
+    "build": "lg-internal-build-package",
+    "tsc": "tsc --build tsconfig.json",
     "create-matcher": "npx ts-node ./scripts/createNewMatcher.ts"
   },
   "publishConfig": {
@@ -20,6 +19,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
+    "@lg-tools/build": "0.3.0",
     "commander": "^11.1.0",
     "fs-extra": "^11.1.1"
   },

From 488d168b16df7a19c0c82aff9c26a849a077d65f Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri, 27 Oct 2023 13:01:02 -0400
Subject: [PATCH 12/22] lint fix

---
 tools/jest-matchers/README.md                     | 3 +--
 tools/jest-matchers/scripts/createNewMatcher.ts   | 4 ++--
 tools/jest-matchers/src/matchers/toBeLabelled.ts  | 3 +++
 tools/jest-matchers/src/matchers/toSpreadRest.tsx | 3 ++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/tools/jest-matchers/README.md b/tools/jest-matchers/README.md
index 2cf1306a1c..7fb8e93d15 100644
--- a/tools/jest-matchers/README.md
+++ b/tools/jest-matchers/README.md
@@ -1,7 +1,7 @@
-
 # Jest Matchers
 
 ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/jest-matchers.svg)
+
 #### [View on MongoDB.design](https://www.mongodb.design/component/jest-matchers/example/)
 
 ## Installation
@@ -17,4 +17,3 @@ yarn add @leafygreen-ui/jest-matchers
 ```shell
 npm install @leafygreen-ui/jest-matchers
 ```
-
diff --git a/tools/jest-matchers/scripts/createNewMatcher.ts b/tools/jest-matchers/scripts/createNewMatcher.ts
index 69b11121db..a3cf6e4f2a 100644
--- a/tools/jest-matchers/scripts/createNewMatcher.ts
+++ b/tools/jest-matchers/scripts/createNewMatcher.ts
@@ -1,8 +1,8 @@
-import { Command } from 'commander';
 import chalk from 'chalk';
-import path from 'path';
+import { Command } from 'commander';
 import fse from 'fs-extra';
 import { camelCase, lowerFirst } from 'lodash';
+import path from 'path';
 
 const cli = new Command();
 cli
diff --git a/tools/jest-matchers/src/matchers/toBeLabelled.ts b/tools/jest-matchers/src/matchers/toBeLabelled.ts
index e9e0b5b482..344bed5b3d 100644
--- a/tools/jest-matchers/src/matchers/toBeLabelled.ts
+++ b/tools/jest-matchers/src/matchers/toBeLabelled.ts
@@ -1,4 +1,5 @@
 import { isNull } from 'lodash';
+
 import { createMatcher } from '../utils/createMatcher';
 
 const isValidString = (str: any): str is string =>
@@ -39,11 +40,13 @@ export const toBeLabelled = createMatcher(function _toBeLabelled(
         : `Could not find element referenced by \`aria-labelledby\`` +
             document.body.innerHTML;
     }
+
     if (!pass && elementId) {
       return this.isNot
         ? `Expected not to find label for ${elementId}`
         : `Could not find a label for the element with id ${elementId}`;
     }
+
     return `Expected the element ${this.isNot ? 'not ' : ''}to have a label`;
   };
 
diff --git a/tools/jest-matchers/src/matchers/toSpreadRest.tsx b/tools/jest-matchers/src/matchers/toSpreadRest.tsx
index 0264e2cd7e..12831b1a88 100644
--- a/tools/jest-matchers/src/matchers/toSpreadRest.tsx
+++ b/tools/jest-matchers/src/matchers/toSpreadRest.tsx
@@ -1,6 +1,7 @@
-import chalk from 'chalk';
 import React from 'react';
 import { render } from '@testing-library/react';
+import chalk from 'chalk';
+
 import { createMatcher } from '../utils/createMatcher';
 
 /**

From 881ee248647df09b0ee88f6b1b1ab53e6d4048f7 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 30 Oct 2023 10:39:09 -0400
Subject: [PATCH 13/22] fix dependencies

---
 tools/jest-matchers/package.json                               | 3 ++-
 .../src/tests/utils/{test-utils.ts => testutils.ts}            | 0
 2 files changed, 2 insertions(+), 1 deletion(-)
 rename tools/jest-matchers/src/tests/utils/{test-utils.ts => testutils.ts} (100%)

diff --git a/tools/jest-matchers/package.json b/tools/jest-matchers/package.json
index 06b45a6f7f..472c5c0f56 100644
--- a/tools/jest-matchers/package.json
+++ b/tools/jest-matchers/package.json
@@ -21,7 +21,8 @@
   "devDependencies": {
     "@lg-tools/build": "0.3.0",
     "commander": "^11.1.0",
-    "fs-extra": "^11.1.1"
+    "fs-extra": "^11.1.1",
+    "jsdom": "^22.1.0"
   },
   "peerDependencies": {
     "@testing-library/react": "^14.0.0",
diff --git a/tools/jest-matchers/src/tests/utils/test-utils.ts b/tools/jest-matchers/src/tests/utils/testutils.ts
similarity index 100%
rename from tools/jest-matchers/src/tests/utils/test-utils.ts
rename to tools/jest-matchers/src/tests/utils/testutils.ts

From 73241edfb3d28fdab2974a12a4c3d06f96e4638e Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 30 Oct 2023 10:39:16 -0400
Subject: [PATCH 14/22] Update yarn.lock

---
 yarn.lock | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 74 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 330241f4f6..6752934eff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6039,6 +6039,13 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+cssstyle@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-3.0.0.tgz#17ca9c87d26eac764bb8cfd00583cff21ce0277a"
+  integrity sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==
+  dependencies:
+    rrweb-cssom "^0.6.0"
+
 csstype@^3.0.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
@@ -6088,6 +6095,15 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+data-urls@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4"
+  integrity sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==
+  dependencies:
+    abab "^2.0.6"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^12.0.0"
+
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -6137,7 +6153,7 @@ decamelize@^6.0.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-6.0.0.tgz#8cad4d916fde5c41a264a43d0ecc56fe3d31749e"
   integrity sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==
 
-decimal.js@^10.4.2:
+decimal.js@^10.4.2, decimal.js@^10.4.3:
   version "10.4.3"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
@@ -9016,6 +9032,35 @@ jsdom@^20.0.0:
     ws "^8.11.0"
     xml-name-validator "^4.0.0"
 
+jsdom@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-22.1.0.tgz#0fca6d1a37fbeb7f4aac93d1090d782c56b611c8"
+  integrity sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==
+  dependencies:
+    abab "^2.0.6"
+    cssstyle "^3.0.0"
+    data-urls "^4.0.0"
+    decimal.js "^10.4.3"
+    domexception "^4.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.4"
+    parse5 "^7.1.2"
+    rrweb-cssom "^0.6.0"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.2"
+    w3c-xmlserializer "^4.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^12.0.1"
+    ws "^8.13.0"
+    xml-name-validator "^4.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -10269,7 +10314,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-nwsapi@^2.2.2:
+nwsapi@^2.2.2, nwsapi@^2.2.4:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
   integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
@@ -10563,7 +10608,7 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse5@^7.0.0, parse5@^7.1.1:
+parse5@^7.0.0, parse5@^7.1.1, parse5@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
   integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
@@ -10960,7 +11005,7 @@ pumpify@^1.3.3:
     inherits "^2.0.3"
     pump "^2.0.0"
 
-punycode@2.x.x, punycode@^2.1.0, punycode@^2.1.1:
+punycode@2.x.x, punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
@@ -11612,6 +11657,11 @@ rollup@3.25.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rrweb-cssom@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
+  integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -12484,6 +12534,13 @@ tr46@^3.0.0:
   dependencies:
     punycode "^2.1.1"
 
+tr46@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-4.1.1.tgz#281a758dcc82aeb4fe38c7dfe4d11a395aac8469"
+  integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==
+  dependencies:
+    punycode "^2.3.0"
+
 tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
@@ -13162,6 +13219,14 @@ whatwg-url@^11.0.0:
     tr46 "^3.0.0"
     webidl-conversions "^7.0.0"
 
+whatwg-url@^12.0.0, whatwg-url@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-12.0.1.tgz#fd7bcc71192e7c3a2a97b9a8d6b094853ed8773c"
+  integrity sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==
+  dependencies:
+    tr46 "^4.1.1"
+    webidl-conversions "^7.0.0"
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
@@ -13295,6 +13360,11 @@ ws@^8.11.0, ws@^8.2.3:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
+ws@^8.13.0:
+  version "8.14.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f"
+  integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"

From 007a08e7076ca7b484631939d892b5c05a4779e8 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Mon, 30 Oct 2023 10:39:49 -0400
Subject: [PATCH 15/22] Update toBeLabelled.spec.ts

---
 tools/jest-matchers/src/tests/toBeLabelled.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/jest-matchers/src/tests/toBeLabelled.spec.ts b/tools/jest-matchers/src/tests/toBeLabelled.spec.ts
index 9607627f0b..35b7f748d2 100644
--- a/tools/jest-matchers/src/tests/toBeLabelled.spec.ts
+++ b/tools/jest-matchers/src/tests/toBeLabelled.spec.ts
@@ -1,4 +1,4 @@
-import { render } from './utils/test-utils';
+import { render } from './utils/testutils';
 
 describe('tools/jest-matchers/.toBeLabelled', () => {
   test('unlabelled', () => {

From fa142c1507b018d0ea4385ec8ae643b7cf8b7b1e Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 30 Oct 2023 10:51:38 -0400
Subject: [PATCH 16/22] Update config.ts

---
 tools/validate/src/dependencies/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/validate/src/dependencies/config.ts b/tools/validate/src/dependencies/config.ts
index 5075290ad0..ae5b0dd9c9 100644
--- a/tools/validate/src/dependencies/config.ts
+++ b/tools/validate/src/dependencies/config.ts
@@ -30,7 +30,7 @@ export const devFilePatterns: Array<RegExp> = [
   /.*\/dist\/.*/,
 ];
 
-/** If a dependency is flagged as bing imported by one of these files, ignore it */
+/** If a dependency is flagged as being imported by one of these files, ignore it */
 export const ignoreFilePatterns: Array<RegExp> = [
   /.*package.json?/,
   /.*README.md/,

From 069d681671311b91912ddfcc4d2b672216b7603e Mon Sep 17 00:00:00 2001
From: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Mon, 30 Oct 2023 10:53:49 -0400
Subject: [PATCH 17/22] Update validateListedDevDependencies.ts

---
 tools/validate/src/dependencies/validateListedDevDependencies.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tools/validate/src/dependencies/validateListedDevDependencies.ts b/tools/validate/src/dependencies/validateListedDevDependencies.ts
index e0062e2a1c..e1ed1f323e 100644
--- a/tools/validate/src/dependencies/validateListedDevDependencies.ts
+++ b/tools/validate/src/dependencies/validateListedDevDependencies.ts
@@ -22,7 +22,6 @@ export function validateListedDevDependencies(
 ): Array<string> {
   const { verbose } = options ?? { verbose: false };
   const {
-    // devDependencies: importedPackagesInTestFile,
     dependencies: importedPackagesInSourceFile,
   } = sortDependenciesByUsage(importedPackages, pkgName);
 

From 7835727618d26dfd79e99f4dd429c6aaba1e8c0c Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 31 Oct 2023 13:19:38 -0400
Subject: [PATCH 18/22] Update config.ts

---
 tools/validate/src/dependencies/config.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/tools/validate/src/dependencies/config.ts b/tools/validate/src/dependencies/config.ts
index ae5b0dd9c9..76d276a2cf 100644
--- a/tools/validate/src/dependencies/config.ts
+++ b/tools/validate/src/dependencies/config.ts
@@ -37,7 +37,12 @@ export const ignoreFilePatterns: Array<RegExp> = [
   /.*CHANGELOG.md/,
 ];
 
-/** these dependencies will be ignored when listed in a package.json */
+/**
+ * These dependencies will be ignored when listed in a package.json.
+ * These are globally available dev dependencies.
+ * We don't want every component flagged for not having
+ * these packages explicitly declared in its package.json
+ */
 export const ignoreDependencies = [
   '@leafygreen-ui/mongo-nav',
   '@babel/*',

From a051697e5182838492080bf1507706f471958859 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue, 31 Oct 2023 13:20:26 -0400
Subject: [PATCH 19/22] lint fix

---
 .../src/dependencies/validateListedDevDependencies.ts        | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/tools/validate/src/dependencies/validateListedDevDependencies.ts b/tools/validate/src/dependencies/validateListedDevDependencies.ts
index e1ed1f323e..bc1dabbade 100644
--- a/tools/validate/src/dependencies/validateListedDevDependencies.ts
+++ b/tools/validate/src/dependencies/validateListedDevDependencies.ts
@@ -21,9 +21,8 @@ export function validateListedDevDependencies(
   options?: Partial<ValidateCommandOptions>,
 ): Array<string> {
   const { verbose } = options ?? { verbose: false };
-  const {
-    dependencies: importedPackagesInSourceFile,
-  } = sortDependenciesByUsage(importedPackages, pkgName);
+  const { dependencies: importedPackagesInSourceFile } =
+    sortDependenciesByUsage(importedPackages, pkgName);
 
   const { devDependencies: _listedDevObj } = pick(pkgJson, ['devDependencies']);
   const listedDevDependencies = _listedDevObj ? Object.keys(_listedDevObj) : [];

From 2e2bfaede8705c18a5b5444c7cb7438c865c090d Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 15 Feb 2024 13:45:24 -0500
Subject: [PATCH 20/22] Update toSpreadRest.tsx

---
 tools/jest-matchers/src/matchers/toSpreadRest.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/jest-matchers/src/matchers/toSpreadRest.tsx b/tools/jest-matchers/src/matchers/toSpreadRest.tsx
index 12831b1a88..11ab27b94c 100644
--- a/tools/jest-matchers/src/matchers/toSpreadRest.tsx
+++ b/tools/jest-matchers/src/matchers/toSpreadRest.tsx
@@ -5,7 +5,7 @@ import chalk from 'chalk';
 import { createMatcher } from '../utils/createMatcher';
 
 /**
- * Tests whether a Component
+ * Tests whether a Component spreads all unused props to the root HTML element
  */
 export const toSpreadRest = createMatcher(function _toSpreadRest(
   Component: React.ReactElement,

From cf8994c2f5cd0bb3e5d0576e5bb399ee5d5c1bce Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 15 Feb 2024 14:05:23 -0500
Subject: [PATCH 21/22] Adds toSpreadRest to Combobox & DatePicker

---
 packages/combobox/src/Combobox/Combobox.spec.tsx        | 4 ++++
 packages/date-picker/src/DatePicker/DatePicker.spec.tsx | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/packages/combobox/src/Combobox/Combobox.spec.tsx b/packages/combobox/src/Combobox/Combobox.spec.tsx
index cd3f66b275..396371e96d 100644
--- a/packages/combobox/src/Combobox/Combobox.spec.tsx
+++ b/packages/combobox/src/Combobox/Combobox.spec.tsx
@@ -29,6 +29,8 @@ import {
   testif,
 } from '../utils/ComboboxTestUtils';
 
+import { Combobox } from './Combobox';
+
 /**
  * Tests
  */
@@ -70,6 +72,8 @@ describe('packages/combobox', () => {
         : testif(select === 'multiple')(name, fn);
 
     describe('Basic rendering', () => {
+      test('spreads rest', () => expect(Combobox).toSpreadRest());
+
       // Label prop
       test('Label is rendered', () => {
         const { labelEl } = renderCombobox(select, { label: 'Some label' });
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 9c49d7485f..efecdcd64e 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -71,6 +71,8 @@ describe('packages/date-picker', () => {
     /// Note: Many rendering tests should be handled by Chromatic
 
     describe('Input', () => {
+      test('spreads rest', () => expect(DatePicker).toSpreadRest());
+
       test('renders label', () => {
         const { getByText } = render(<DatePicker label="Label" />);
         const label = getByText('Label');

From 7917785f8a23c80c819517cf87471d3cdc85c789 Mon Sep 17 00:00:00 2001
From: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu, 15 Feb 2024 14:19:48 -0500
Subject: [PATCH 22/22] adds toBeLabelled to text input

---
 .../text-input/src/TextInput/TextInput.spec.tsx   | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/text-input/src/TextInput/TextInput.spec.tsx b/packages/text-input/src/TextInput/TextInput.spec.tsx
index bc50fa648c..4be380094e 100644
--- a/packages/text-input/src/TextInput/TextInput.spec.tsx
+++ b/packages/text-input/src/TextInput/TextInput.spec.tsx
@@ -47,12 +47,27 @@ describe('packages/text-input', () => {
       expect(results).toHaveNoViolations();
     });
   });
+
   test(`renders ${defaultProps.label} as the input label and ${defaultProps.description} as the description`, () => {
     const { label, description } = renderTextInput(defaultProps);
     expect(label?.innerHTML).toContain(defaultProps.label);
     expect(description?.innerHTML).toContain(defaultProps.description);
   });
 
+  test('allows external label', () => {
+    const { getByTestId } = render(
+      <>
+        <label htmlFor="input" id="label">
+          Label
+        </label>
+        <TextInput data-testid="input" id="input" aria-labelledby="label" />
+      </>,
+    );
+
+    const input = getByTestId('input');
+    expect(input).toBeLabelled();
+  });
+
   test(`renders ${defaultProps.placeholder} as placeholder text`, () => {
     const { getByPlaceholderText } = renderTextInput(defaultProps);
     expect(getByPlaceholderText(defaultProps.placeholder)).toBeVisible();