docs(advanced): Improve the Testing Form section

src/components/codeExamples/testingForm.ts

@@ -54,82 +54,85 @@ const mockLogin = jest.fn((email, password) => {
   return Promise.resolve({ email, password });
 });
 
-describe("App", () => {
-  beforeEach(() => {
-    render(<App login={mockLogin} />);
+
+it("should display required error when value is invalid", async () => {
+  render(<App login={mockLogin} />);
+
+  fireEvent.submit(screen.getByRole("button"));
+
+  expect(await screen.findAllByRole("alert")).toHaveLength(2);
+  expect(mockLogin).not.toBeCalled();
+});
+
+it("should display matching error when email is invalid", async () => {
+  render(<App login={mockLogin} />);
+
+  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
+    target: {
+      value: "test"
+    }
   });
 
-  it("should display required error when value is invalid", async () => {
-    fireEvent.submit(screen.getByRole("button"));
+  fireEvent.input(screen.getByLabelText("password"), {
+    target: {
+      value: "password"
+    }
+  });
 
-    expect(await screen.findAllByRole("alert")).toHaveLength(2);
-    expect(mockLogin).not.toBeCalled();
+  fireEvent.submit(screen.getByRole("button"));
+
+  expect(await screen.findAllByRole("alert")).toHaveLength(1);
+  expect(mockLogin).not.toBeCalled();
+  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue("test");
+  expect(screen.getByLabelText("password")).toHaveValue("password");
+});
+
+it("should display min length error when password is invalid", async () => {
+  render(<App login={mockLogin} />);
+
+  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
+    target: {
+      value: "test@mail.com"
+    }
   });
 
-  it("should display matching error when email is invalid", async () => {
-    fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
-      target: {
-        value: "test"
-      }
-    });
-
-    fireEvent.input(screen.getByLabelText("password"), {
-      target: {
-        value: "password"
-      }
-    });
-
-    fireEvent.submit(screen.getByRole("button"));
-
-    expect(await screen.findAllByRole("alert")).toHaveLength(1);
-    expect(mockLogin).not.toBeCalled();
-    expect(screen.getByRole("textbox", { name: /email/i }).value).toBe("test");
-    expect(screen.getByLabelText("password").value).toBe("password");
+  fireEvent.input(screen.getByLabelText("password"), {
+    target: {
+      value: "pass"
+    }
   });
 
-  it("should display min length error when password is invalid", async () => {
-    fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
-      target: {
-        value: "test@mail.com"
-      }
-    });
-
-    fireEvent.input(screen.getByLabelText("password"), {
-      target: {
-        value: "pass"
-      }
-    });
-
-    fireEvent.submit(screen.getByRole("button"));
-
-    expect(await screen.findAllByRole("alert")).toHaveLength(1);
-    expect(mockLogin).not.toBeCalled();
-    expect(screen.getByRole("textbox", { name: /email/i }).value).toBe(
-      "test@mail.com"
-    );
-    expect(screen.getByLabelText("password").value).toBe("pass");
+  fireEvent.submit(screen.getByRole("button"));
+
+  expect(await screen.findAllByRole("alert")).toHaveLength(1);
+  expect(mockLogin).not.toBeCalled();
+  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue(
+    "test@mail.com"
+  );
+  expect(screen.getByLabelText("password")).toHaveValue("pass");
+});
+
+it("should not display error when value is valid", async () => {
+  render(<App login={mockLogin} />);
+
+  fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
+    target: {
+      value: "test@mail.com"
+    }
   });
 
-  it("should not display error when value is valid", async () => {
-    fireEvent.input(screen.getByRole("textbox", { name: /email/i }), {
-      target: {
-        value: "test@mail.com"
-      }
-    });
-
-    fireEvent.input(screen.getByLabelText("password"), {
-      target: {
-        value: "password"
-      }
-    });
-
-    fireEvent.submit(screen.getByRole("button"));
-
-    await waitFor(() => expect(screen.queryAllByRole("alert")).toHaveLength(0));
-    expect(mockLogin).toBeCalledWith("test@mail.com", "password");
-    expect(screen.getByRole("textbox", { name: /email/i }).value).toBe("");
-    expect(screen.getByLabelText("password").value).toBe("");
+  fireEvent.input(screen.getByLabelText("password"), {
+    target: {
+      value: "password"
+    }
   });
+
+  fireEvent.submit(screen.getByRole("button"));
+
+  await waitFor(() => expect(screen.queryAllByRole("alert")).toHaveLength(0));
+  expect(mockLogin).toBeCalledWith("test@mail.com", "password");
+  expect(screen.getByRole("textbox", { name: /email/i })).toHaveValue("");
+  expect(screen.getByLabelText("password")).toHaveValue("");
 });
 `
 
@@ -159,29 +162,29 @@ export default function App() {
 `
 export const actWarningTest = `
 import React from "react";
-import { render, screen, act } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import App from "./App";
 
-describe("App", () => {
-  it("should have a submit button", () => {
-    render(<App />);
-    expect(screen.getByText("SUBMIT")).toBeInTheDocument();
-  });
+it("should have a submit button", () => {
+  render(<App />);
+
+  expect(screen.getByText("SUBMIT")).toBeInTheDocument();
 });
 `
 
 export const actWarningSolution = `
 import React from "react";
-import { render, screen, act } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import App from "./App";
 
-describe("App", () => {
-  it("should have a submit button", async () => {
-    await act(async () => {
-      render(<App />)
-    });
-    expect(screen.getByText("SUBMIT")).toBeInTheDocument();
-  });
+it("should have a submit button", async () => {
+  render(<App />)
+
+  expect(await screen.findByText("SUBMIT")).toBeInTheDocument();
+
+  // Now that the UI was awaited until the async behavior was completed,
+  // you can keep asserting with \`get*\` queries.
+  expect(screen.getByRole('textbox')).toBeInTheDocument();
 });
 
 `

src/data/en/advanced.tsx

@@ -464,6 +464,27 @@ export default {
           url="https://codesandbox.io/s/react-hook-form-unit-test-docs-066zk"
         />
 
+        <p>
+          Additionally, you can set up{" "}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/testing-library/eslint-plugin-testing-library"
+          >
+            eslint-plugin-testing-library
+          </a>{" "}
+          and{" "}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/testing-library/eslint-plugin-jest-dom"
+          >
+            eslint-plugin-jest-dom
+          </a>{" "}
+          to follow best practices and anticipate common mistakes when writing
+          your tests.
+        </p>
+
         <p>
           <b className={typographyStyles.note}>Step 2:</b> Create login form.
         </p>
@@ -498,8 +519,8 @@ export default {
             <p>Test submission failure.</p>
 
             <p>
-              We are using <code>waitFor</code> and <code>find*</code> methods
-              to detect submission feedback, because the{" "}
+              We are using <code>waitFor</code> util and <code>find*</code>{" "}
+              queries to detect submission feedback, because the{" "}
               <code>handleSubmit</code> method is executed asynchronously.
             </p>
           </li>
@@ -561,8 +582,18 @@ export default {
         </p>
 
         <p>
-          To solve this, wrap your <code>render()</code> calls in{" "}
-          <code>await act(async () ={`> {}`})</code>:
+          To solve this, wait until some element from your UI appears with{" "}
+          <code>find*</code> queries. Note that you <strong>must not</strong>{" "}
+          wrap your <code>render()</code> calls in <code>act()</code>.{" "}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#wrapping-things-in-act-unnecessarily"
+          >
+            You can read more about wrapping things in <code>act</code>{" "}
+            unnecessarily here
+          </a>
+          .
         </p>
         <CodeArea
           rawData={CodeExampleTestingForm.actWarningSolution}