diff --git a/README.md b/README.md
index 9243170..bd7dda7 100644
--- a/README.md
+++ b/README.md
@@ -71,3 +71,5 @@ that there is negligible algorithmic perf difference in performance between the
**Local macbook results**
+
+Another thing to keep in mind is that `hidden` option is only applicable to `ByRole` queries, and not to `ByLabelText` queries. So if you are using `ByLabelText` queries, you will not see any performance improvement from setting `defaultHidden` to true or individual `hidden` option to true.
diff --git a/package.json b/package.json
index f2c6d02..c1c9082 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,10 @@
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
- "test:default": "jest src/App.test.tsx",
- "test:default:hidden": "jest src/App.defaultHidden.test.tsx"
+ "test": "jest",
+ "test:all": "jest src/App.test.tsx",
+ "test:hidden:default": "jest src/App.defaultHidden.test.tsx",
+ "test:hidden:individual": "jest src/App.individualHidden.test.tsx"
},
"dependencies": {
"react": "^18.3.1",
diff --git a/src/App.defaultHidden.test.tsx b/src/App.defaultHidden.test.tsx
index 4691460..fdc3e1e 100644
--- a/src/App.defaultHidden.test.tsx
+++ b/src/App.defaultHidden.test.tsx
@@ -27,109 +27,30 @@ const components = [
},
];
-describe.each(components)(
- "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
- ({ component, iterations }) => {
- beforeEach(() => {
- render(component);
- });
-
- it("getByRole selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByRole("button", {
- name: `Button label ${index}`,
- });
- await userEvent.click(button);
- await waitFor(() =>
- expect(
- screen.getByRole("paragraph", {
- name: `Service label ${index}`,
- }),
- ),
- );
- }
- });
-
- it("getByLabelText selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByLabelText(`Button label ${index}`);
- await userEvent.click(button);
- await waitFor(() =>
- expect(screen.getByLabelText(`Service label ${index}`)),
- );
- }
- });
-
- it("getByPlaceholderText selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const input = screen.getByPlaceholderText(
- `Button input placeholder ${index}`,
- );
- await userEvent.click(input);
- await waitFor(() =>
- expect(
- screen.getByPlaceholderText(
- `Service textarea placeholder ${index}`,
+describe("App defaultHidden test", () => {
+ // The hidden attribute is only only affecting `ByRole` queries
+ describe.each(components)(
+ "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
+ ({ component, iterations }) => {
+ beforeEach(() => {
+ render(component);
+ });
+
+ it("getByRole selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const button = screen.getByRole("button", {
+ name: `Button label ${index}`,
+ });
+ await userEvent.click(button);
+ await waitFor(() =>
+ expect(
+ screen.getByRole("paragraph", {
+ name: `Service label ${index}`,
+ }),
),
- ),
- );
- }
- });
-
- it("getByText selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByText(`Button text ${index}`);
- await userEvent.click(button);
- await waitFor(() =>
- expect(screen.getByText(`Service text ${index}`)).toBeInTheDocument(),
- );
- }
- });
-
- it("getByDisplayValue selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const input = screen.getByDisplayValue(`Button input value ${index}`);
- await userEvent.click(input);
- await waitFor(() =>
- expect(screen.getByDisplayValue(`Service textarea value ${index}`)),
- );
- }
- });
-
- it("getByAltText selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const img = screen.getByAltText(`Button image alt ${index}`);
- await userEvent.click(img);
- await waitFor(() =>
- expect(
- screen.getByAltText(`Service image alt ${index}`),
- ).toBeInTheDocument(),
- );
- }
- });
-
- it("getByTitle selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByTitle(`Button title ${index}`);
- await userEvent.click(button);
- await waitFor(() =>
- expect(
- screen.getByTitle(`Service title ${index}`),
- ).toBeInTheDocument(),
- );
- }
- });
-
- it("getByTestId selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByTestId(`button-test-id-${index}`);
- await userEvent.click(button);
- await waitFor(() =>
- expect(
- screen.getByTestId(`button-test-id-${index}`),
- ).toBeInTheDocument(),
- );
- }
- });
- },
-);
+ );
+ }
+ });
+ },
+ );
+});
diff --git a/src/App.individualHidden.test.tsx b/src/App.individualHidden.test.tsx
new file mode 100644
index 0000000..e7ba853
--- /dev/null
+++ b/src/App.individualHidden.test.tsx
@@ -0,0 +1,54 @@
+import { waitFor, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import App from "./App";
+
+const components = [
+ {
+ name: "Simple",
+ component: ,
+ iterations: 2,
+ depth: 1,
+ },
+ {
+ name: "Medium",
+ component: ,
+ iterations: 5,
+ depth: 3,
+ },
+ {
+ name: "Complex",
+ component: ,
+ iterations: 10,
+ depth: 5,
+ },
+];
+
+describe("App individual hidden test", () => {
+ // The hidden attribute is only only affecting `ByRole` queries
+ describe.each(components)(
+ "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
+ ({ component, iterations }) => {
+ beforeEach(() => {
+ render(component);
+ });
+
+ it("getByRole selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const button = screen.getByRole("button", {
+ name: `Button label ${index}`,
+ hidden: true,
+ });
+ await userEvent.click(button);
+ await waitFor(() =>
+ expect(
+ screen.getByRole("paragraph", {
+ name: `Service label ${index}`,
+ hidden: true,
+ }),
+ ),
+ );
+ }
+ });
+ },
+ );
+});
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 6829f21..e7d6703 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -23,109 +23,113 @@ const components = [
},
];
-describe.each(components)(
- "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
- ({ component, iterations }) => {
- beforeEach(() => {
- render(component);
- });
+describe("App general test", () => {
+ describe.each(components)(
+ "Perf testing $name component with iterations complexity if '$iterations' and depth complexity of '$depth'",
+ ({ component, iterations }) => {
+ beforeEach(() => {
+ render(component);
+ });
- it("getByRole selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByRole("button", {
- name: `Button label ${index}`,
- });
- await userEvent.click(button);
- await waitFor(() =>
- expect(
- screen.getByRole("paragraph", {
- name: `Service label ${index}`,
- }),
- ),
- );
- }
- });
+ it("getByRole selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const button = screen.getByRole("button", {
+ name: `Button label ${index}`,
+ });
+ await userEvent.click(button);
+ await waitFor(() =>
+ expect(
+ screen.getByRole("paragraph", {
+ name: `Service label ${index}`,
+ }),
+ ),
+ );
+ }
+ });
- it("getByLabelText selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByLabelText(`Button label ${index}`);
- await userEvent.click(button);
- await waitFor(() =>
- expect(screen.getByLabelText(`Service label ${index}`)),
- );
- }
- });
+ it("getByLabelText selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const button = screen.getByLabelText(`Button label ${index}`);
+ await userEvent.click(button);
+ await waitFor(() =>
+ expect(screen.getByLabelText(`Service label ${index}`)),
+ );
+ }
+ });
- it("getByPlaceholderText selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const input = screen.getByPlaceholderText(
- `Button input placeholder ${index}`,
- );
- await userEvent.click(input);
- await waitFor(() =>
- expect(
- screen.getByPlaceholderText(
- `Service textarea placeholder ${index}`,
+ it("getByPlaceholderText selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const input = screen.getByPlaceholderText(
+ `Button input placeholder ${index}`,
+ );
+ await userEvent.click(input);
+ await waitFor(() =>
+ expect(
+ screen.getByPlaceholderText(
+ `Service textarea placeholder ${index}`,
+ ),
),
- ),
- );
- }
- });
+ );
+ }
+ });
- it("getByText selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByText(`Button text ${index}`);
- await userEvent.click(button);
- await waitFor(() =>
- expect(screen.getByText(`Service text ${index}`)).toBeInTheDocument(),
- );
- }
- });
+ it("getByText selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const button = screen.getByText(`Button text ${index}`);
+ await userEvent.click(button);
+ await waitFor(() =>
+ expect(
+ screen.getByText(`Service text ${index}`),
+ ).toBeInTheDocument(),
+ );
+ }
+ });
- it("getByDisplayValue selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const input = screen.getByDisplayValue(`Button input value ${index}`);
- await userEvent.click(input);
- await waitFor(() =>
- expect(screen.getByDisplayValue(`Service textarea value ${index}`)),
- );
- }
- });
+ it("getByDisplayValue selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const input = screen.getByDisplayValue(`Button input value ${index}`);
+ await userEvent.click(input);
+ await waitFor(() =>
+ expect(screen.getByDisplayValue(`Service textarea value ${index}`)),
+ );
+ }
+ });
- it("getByAltText selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const img = screen.getByAltText(`Button image alt ${index}`);
- await userEvent.click(img);
- await waitFor(() =>
- expect(
- screen.getByAltText(`Service image alt ${index}`),
- ).toBeInTheDocument(),
- );
- }
- });
+ it("getByAltText selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const img = screen.getByAltText(`Button image alt ${index}`);
+ await userEvent.click(img);
+ await waitFor(() =>
+ expect(
+ screen.getByAltText(`Service image alt ${index}`),
+ ).toBeInTheDocument(),
+ );
+ }
+ });
- it("getByTitle selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByTitle(`Button title ${index}`);
- await userEvent.click(button);
- await waitFor(() =>
- expect(
- screen.getByTitle(`Service title ${index}`),
- ).toBeInTheDocument(),
- );
- }
- });
+ it("getByTitle selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const button = screen.getByTitle(`Button title ${index}`);
+ await userEvent.click(button);
+ await waitFor(() =>
+ expect(
+ screen.getByTitle(`Service title ${index}`),
+ ).toBeInTheDocument(),
+ );
+ }
+ });
- it("getByTestId selector performance", async () => {
- for (const index of Array.from({ length: iterations }).keys()) {
- const button = screen.getByTestId(`button-test-id-${index}`);
- await userEvent.click(button);
- await waitFor(() =>
- expect(
- screen.getByTestId(`button-test-id-${index}`),
- ).toBeInTheDocument(),
- );
- }
- });
- },
-);
+ it("getByTestId selector performance", async () => {
+ for (const index of Array.from({ length: iterations }).keys()) {
+ const button = screen.getByTestId(`button-test-id-${index}`);
+ await userEvent.click(button);
+ await waitFor(() =>
+ expect(
+ screen.getByTestId(`button-test-id-${index}`),
+ ).toBeInTheDocument(),
+ );
+ }
+ });
+ },
+ );
+});