Question

我有此测试通过：

describe("full app rendering/navigating", () => {
  const { container, getByText } = renderWithRouter(
    <RecipeIndexPage recipes={recipes} />
  );
  const cookiesLink = getByText(/cookies/i);

  it("should render the index page with the list of recipes", () => {
    expect(container.innerHTML).toMatch("Recipes");
    expect(container.innerHTML).toContain("Chocolate Chip Cookies");
  });
  it("should navigate to a recipe", () => {
    expect(cookiesLink).toBeDefined();
  });
});

但是，当我在第二个。cookiesLink块内声明it时，找不到该文本：

  const { container, getByText } = renderWithRouter(
    <RecipeIndexPage recipes={recipes} />
  );

  it("should render the index page with the list of recipes", () => {
    expect(container.innerHTML).toMatch("Recipes");
    expect(container.innerHTML).toContain("Chocolate Chip Cookies");
  });
  it("should navigate to a recipe", () => {
    const cookiesLink = getByText(/cookies/i);
    expect(cookiesLink).toBeDefined();
  });
});

-----
FAIL:

    Unable to find an element with the text: /cookies/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body />

      37 |   });
      38 |   it("should navigate to a recipe", () => {
    > 39 |     const cookiesLink = getByText(/cookies/i);
         |                         ^
      40 |     expect(cookiesLink).toBeDefined();
      41 |   });

为什么我用这种方式写时不起作用？

反应测试库的范围

0 个答案: