使用 react-testing-library 在 `describe` 中渲染的组件在 `it` 中不可见答案

【问题标题】：Component rendered in `describe` is not visible in `it` using react-testing-library使用 react-testing-library 在 `describe` 中渲染的组件在 `it` 中不可见
【发布时间】：2019-09-30 10:16:27
【问题描述】：

当我在 it 块中渲染一个组件时，一切都按预期工作。

  it("when user inputs more characters it displays suggestions", async () => {
    const { getByLabelText, findByText } = render(<Component />);

    debug();
  });

但这不是一个好习惯。我更喜欢将it 仅用于断言。当我这样做时：

  describe("when user inputs more characters ", async () => {
    const { getByLabelText, findByText } = render(<Component />);

    it("displays suggestions", () => {
      debug();
    });
  });

调试仅显示<body /> 并且所有查询在it 块中都失败。

我做错了什么或为什么不支持？

【问题讨论】：

标签： react-testing-library

【解决方案1】：

它们都有效，问题是您必须将 render 放入 it 块中。那是因为你不能重用渲染的组件

【讨论】：

这个简单的例子没问题。在大多数情况下，尽管您需要设置测试用例并执行一些操作。将这些部分分开（给定、何时、然后）是一个很好的做法。开玩笑地说，大多数人使用beforeEach。如果你想做这样的事情怎么办：gist.githubusercontent.com/mazikwyry/…
您可以在 setup 函数中移动 before 逻辑，并在 it 块的开头调用它