Jest: Как настроить и развернуть тест, который следует за потоком пользователей с описанием.

Question

У меня есть компонент ввода.Он может отображаться и вести себя 6 различными способами:

Ввод:

• Ввод текста
• Ввод текста с начальным украшением
• Emailinput
• Ввод электронной почты с начальным украшением
• Ввод пароля с конечным украшением
• Ввод пароля с начальным и конечным украшением

Вместоповторяя каждый тест 6 раз, я бы хотел использовать description.each (), а не прямую description ().

Вход также будет отображаться и вести себя по-разному в зависимости от взаимодействия пользователя с входом.

Например, все пользователи начнут со следующего потока:

1. Первоначальный рендеринг ввода
2. Фокус в

Пользователь может затем следоватьпоток, такой как:

1. Ввод неверного значения ввода
2. Фокусировка
3. Фокусировка в
4. Ввод допустимого ввода (тот же результат, что и шаг1. ниже)
5. Сфокусируется (тот же результат, что и на шаге 2 ниже)

Или другойтам поток:

1. Ввод правильного значения ввода
2. Фокусировка
3. Фокусировка в
4. Ввод недопустимого ввода или удаление допустимого ввода (тот же результатas вводит недопустимый ввод)
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), чтобы он работал с описанием .each ()?