#关于 Testing Library 的一些思考

navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------

npm install --save-dev @testing-library/react @testing-library/jest-dom

import "@testing-library/jest-dom/extend-expect";

import { render, screen } from "@testing-library/react";
import Home from "../pages/index";
import "@testing-library/jest-dom";

describe("Home", () => {
  it("renders a heading", () => {
    const { container } = render(<Home />);

    expect(screen.getByRole("heading", {
      name: /react/i,
    })).toBeInTheDocument();

    expect(container).toMatchSnapshot();
  });
});

screen.getByText(/email address/i);

screen.getByRole("button", { name: /submit/i });

screen.getByLabelText(/email address/i);

screen.getByPlaceholderText(/enter email/i);

// ...

describe("PageWithButton", () => {
  it("renders the page with a button", async () => {
    render(<PageWithButton />);

    const button = screen.getByRole("button", {name: "Click Me"});

    fireEvent.click(button);

    await screen.findByText("Clicked once");

    fireEvent.click(button);

    await screen.findByText("Clicked twice");
  });
});

describe("PageWithButton", () => {
  it("renders the page with a button", async () => {
    render(<PageWithButton />);

    const button = screen.getByRole("button", {name: "Click Me"});

    fireEvent.click(button);

    await waitFor(() => {
        expect(screen.getByText("Clicked once")).toBeInTheDocument();
        // Other assertions
    });
    // Other test
  });
});

describe("WillBeloadedForAWhile", () => {
  it("this page will be loaded for a while", async () => {
    render(<WillBeloadedForAWhile />);

    // The page is loading at this time.
    
    await waitForElementToBeRemoved(screen.getByText("Loading..."));

    // At this time, the page has been loaded.

  });
});

describe("screen.debug", () => {
  it("Print the current DOM Tree in the console", async () => {
    render(<SomeComponent />);

    screen.debug(); // debug document
    screen.debug(screen.getByText("test")); // debug single element
    screen.debug(screen.getAllByText("multi-test")) // debug multiple elements
  });
});

describe("screen.debug", () => {
  it("Print the current DOM Tree in the console", async () => {
    render(<SomeComponent />);

    screen.logTestingPlaygroundURL(); // log entire document to testing-playground
    screen.logTestingPlaygroundURL(screen.getByText('test')); // log a single element
  });
});

import { logRoles, render } from "@testing-library/react";

describe("SomeList", () => {
  it("renders some list", async () => {
    const { container } = render(<SomeList />);

    logRoles(container);
  });
});

<form>
  <div>
    <label for="email">Email address</label>
    <input type="email" aria-describedby="email-help" placeholder="Enter email" />
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" placeholder="Password" />
  </div>
  <button type="submit">Submit</button>
</form>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>