如何减少测试库/反应库中的查询

Question

我对虚拟计数器组件进行以下简单测试：

describe("Counter", () => {
  it("initially displays 0", () => {
    render(<Counter />);
    expect(screen.getByText("Counter value is 0")).toBeInTheDocument();
  });

  it("displays the given initial value", () => {
    render(<Counter initialValue={10} />);
    expect(screen.getByText("Counter value is 10")).toBeInTheDocument();
  });

  it("has a button for incrementing the value", () => {
    render(<Counter />);
    userEvent.click(screen.getByRole("button", { name: "+1" }));
    expect(screen.getByText("Counter value is 1")).toBeInTheDocument();
  });

  describe("when the maxValue is given", () => {
    it("does not allow to increment the value above the given maximum", () => {
      render(<Counter initialValue={9} maxValue={10} />);
      userEvent.click(screen.getByRole("button", { name: "+1" }));
      expect(screen.getByText("Counter value is 10")).toBeInTheDocument();
      expect(screen.getByRole("button", { name: "+1" })).toBeDisabled();
    });
  });

  it("has a button for decrementing the value", () => {
    render(<Counter initialValue={2} />);
    userEvent.click(screen.getByRole("button", { name: "-1" }));
    expect(screen.getByText("Counter value is 1")).toBeInTheDocument();
  });

  it("does not allow to decrement the value below zero", () => {
    render(<Counter initialValue={0} />);
    expect(screen.getByRole("button", { name: "-1" })).toBeDisabled();

    userEvent.click(screen.getByRole("button", { name: "-1" }));
    expect(screen.getByText("Counter value is 0")).toBeInTheDocument();
  });

  it("has a button for resetting the value", () => {
    render(<Counter initialValue={2} />);
    userEvent.click(screen.getByRole("button", { name: "reset" }));
    expect(screen.getByText("Counter value is 0")).toBeInTheDocument();
  });
});

用一些方便的助手将其弄干是否是一个好习惯，例如：

describe("<Counter /> component", () => {
  const getIncrementButton = () => screen.getByRole("button", { name: "+1" });

  const getDecrementButton = () => screen.getByRole("button", { name: "-1" });

  it("has a button for incrementing the value", () => {
    render(<Counter />);
    userEvent.click(getIncrementButton());
    expect(getValue()).toHaveTextContent("Counter value is 1");
  });

});

我做了一些研究，但找不到关于这种方法的任何体面的资源。

Answer 1

代替显式添加调用getIncrementButton或getDecrementButton的方法，您可以将复位逻辑封装在afterEach中（或者beforeEach也适合您的情况）。

describe("Counter", () => {

  afterEach(() => {
    // reset here  
  });

})