Add custom queries to within

src/test/rtl/custom_render.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render, screen } from './custom_render';
+import { render, screen, within } from './custom_render';
 
 describe('render returns the ByTestSubject custom queries', () => {
   test('queryByTestSubject', () => {
@@ -84,3 +84,77 @@ describe('screen has the ByTestSubject custom queries', () => {
     await expect(screen.findAllByTestSubject('test')).resolves.toHaveLength(1);
   });
 });
+
+describe('within has the ByTestSubject custom queries', () => {
+  test('queryByTestSubject', () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    expect(
+      within(screen.getByTestId('outer')).queryByTestSubject('inner')
+    ).not.toBeNull();
+  });
+
+  test('queryAllByTestSubject', () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    expect(
+      within(screen.getByTestId('outer')).queryAllByTestSubject('inner')
+    ).toHaveLength(1);
+  });
+
+  test('getByTestSubject', () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    expect(
+      within(screen.getByTestId('outer')).getByTestSubject('inner')
+    ).toBeTruthy();
+  });
+
+  test('getAllByTestSubject', () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    expect(
+      within(screen.getByTestId('outer')).getAllByTestSubject('inner')
+    ).toHaveLength(1);
+  });
+
+  test('findByTestSubject', async () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    await expect(
+      within(screen.getByTestId('outer')).findByTestSubject('inner')
+    ).resolves.toBeTruthy();
+  });
+
+  test('findAllByTestSubject', async () => {
+    render(
+      <div data-testid="outer">
+        <div data-test-subj="inner" />
+      </div>
+    );
+
+    await expect(
+      within(screen.getByTestId('outer')).findAllByTestSubject('inner')
+    ).resolves.toHaveLength(1);
+  });
+});

src/test/rtl/custom_render.ts

@@ -55,3 +55,16 @@ const customScreen: Screen<typeof queries & typeof dataTestSubjQueries> = {
 };
 
 export { customScreen as screen };
+
+/**
+ * Custom within util with EUI query helpers
+ *
+ * @see https://testing-library.com/docs/dom-testing-library/api-within/
+ */
+const customWithin = (element: HTMLElement) =>
+  within<typeof queries & typeof dataTestSubjQueries>(element, {
+    ...queries,
+    ...dataTestSubjQueries,
+  });
+
+export { customWithin as within };

src/test/rtl/index.d.ts

@@ -1,3 +1,3 @@
 export * from './component_helpers';
 export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject, } from './data_test_subj_queries';
-export { render, screen } from './custom_render';
+export { render, screen, within } from './custom_render';

src/test/rtl/index.ts

@@ -15,4 +15,4 @@ export {
   findAllByTestSubject,
   findByTestSubject,
 } from './data_test_subj_queries';
-export { render, screen } from './custom_render';
+export { render, screen, within } from './custom_render';

upcoming_changelogs/6737.md

@@ -0,0 +1 @@
+- Added React Testing Library `*ByTestSubject` custom commands to `within()`. RTL utilities can be imported from `@elastic/eui/lib/test/rtl`.