@savelijtomak

Как тестировать поведение React компонентов (изменение стейта или классов после simulate("event") с помощью Enzyme?

Всем привет!

По чуть чуть начал вникать в Enzyme, вопрос такой: Хочу протестировать поведение при котором после нажатия на button к input добавляется новый класс (если у него пустое значение). Вот такой у меня получился листинг:

it("Search component should mark empty input as invalid after click on button", () => {
    const searchComponent = mount<Search, TSearchProps, ISearchState>(<Search onSearch={{}}/>);
    const searchButton = searchComponent.find(".search__button");
    const searchInput = searchComponent.find(".search__input");

    searchInput.simulate("change", {
      target: {
        value: "",
      },
    });
    searchButton.simulate("click");
    searchComponent.update();

    expect(searchInput.hasClass("search__input_invalid"))
      .toBe(true);
  });


Тест фейлится (хотя класс действительно добавляется, хотя searchComponent.debug() думает иначе)

Такой же вопрос, но уже со стейтом компонента. Вот такой вот получился листинг:

it("Search component should set previous artist name to state in lowercase", () => {
    const searchComponent = mount<Search, TSearchProps, ISearchState>(<Search onSearch={{}}/>);
    const searchInput = searchComponent.find(".search__input");
    const searchButton = searchComponent.find(".search__button");

    const expectedPreviousArtistName = "sting";

    searchInput.simulate("change", {
      target: {
        value: "StiNg",
      },
    });
    searchComponent.update();
    searchButton.simulate("click");
    searchComponent.update();

    expect(searchComponent.state().previousArtistName)
      .toBe(expectedPreviousArtistName);
  });


Тест фейлится, говоря о том, что имя артиста пустое.

Всем огромное спасибо за уделенное время!
  • Вопрос задан
  • 121 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы