笑话：如何使用describe.each

Question

我有一个输入组件。它可以以6种不同的方式出现和表现：

输入为：

• 文本输入
• 带有开始装饰的文本输入
• 电子邮件输入
• 带有开始装饰的电子邮件输入
• 带有结尾装饰的密码输入
• 带有开始和结束装饰的密码输入

我不想使用每个测试重复6次，而是使用describe.each（）而不是简单的describe（）。

输入也会出现，并且根据用户与输入的交互行为而有所不同。

例如，所有用户将以以下流程开始：

1. 输入的初始呈现
2. 关注

然后，用户可以遵循以下流程：

1. 输入了无效的输入值
2. 关注
3. 焦点在
4. 输入有效输入（与下面的步骤1相同的结果）
5. 关注（与下面的步骤2相同的结果）

或其他流程：

1. 输入有效的输入值
2. 关注
3. 焦点在
4. 输入无效输入或删除有效输入（与输入无效输入相同的结果）
5. 集中注意力（与输入无效时集中注意力的结果相同）

或其他流程：

1. 不输入任何内容
2. 关注（与输入的初始呈现相同的结果）

与其单独测试每个步骤，不如不进行清理来设置测试，以便我可以为流程的每个阶段嵌套测试，这会更好吗？

例如：

describe.each`...`("Initial render", ({...}) => {
  it("renders as snapshot", () => ....)

  describe("Then users focuses in", () => {
    fireEvent.focusIn(input)
    it("renders as snapshot", () => ....)

    describe("Then user enters valid input", () => {
      fireEvent.change(input, { target: { value: "Valid input" }})
      it("renders as snapshot", () => ....)

      describe("Then user focuses out", () => {
        fireEvent.focusOut(input)
        it("renders as snapshot", () => ....)

        describe("Then user enters an invalid or no input", () => {
          fireEvent.focusIn(input)
          fireEvent.change(input, { target: { value: "" }})
          it("renders as snapshot", () => ....)
        })
      })
    })

    describe("Then user enters an invalid input", () => {
      fireEvent.change(input, { target: { value: "$%^@!" }})
      it("renders as snapshot", () => ....)

      describe("Then user focuses out", () => {
        fireEvent.focusOut(input)
        it("renders as snapshot", () => ....)

        describe("Then user enters an valid input", () => {
          fireEvent.focusIn(input)
          fireEvent.change(input, { target: { value: "Valid input" }})
          it("renders as snapshot", () => ....)
        })
      })
    })

    describe("Then user doesn't enter any input and focuses out", () => {
      fireEvent.focusOut(input)
      it("renders as snapshot", () => ....)
    })
  })
}

如果我这样做，如何正确设置和拆卸每个测试，即使用beforeEach(cleanup)，afterEach(cleanup)，beforeAll(cleanup)和/或afterAll(cleanup)，它与describe.each（）一起使用？