Блог

Я пытаюсь протестировать компонент, отображаемый с Controller помощью from react-hook-form с помощью react-testing-library

           <Controller
            render={({ onChange, onBlur, value }) => (
              <IonInput
                onIonChange={onChange}
                onIonBlur={onBlur}
                value={value}
                type="text"
                data-testid="firstname-field"
              />
            )}
            name="firstName"
            control={control}
            defaultValue={firstName}
          />

  

Значения по умолчанию соответствуют ожидаемым, когда я визуализирую компонент с некоторыми фиктивными данными. Однако, когда я меняю значения, кажется, что события не запускаются. Из этого сообщения в блоге похоже, что ionic экспортирует набор тестовых утилит для обработки пользовательских событий ionic. После настройки этого в моем setupTests.ts я пытаюсь использовать как ionFireEvent, так и fireEvent из RTU, ни один из которых не отражает изменения в компоненте при использовании debug() . Я настроил его так, чтобы я мог использовать оба fireEvent и ionFireEvent для тестирования:

 import { render, screen, wait, fireEvent } from "@testing-library/react";
import { ionFireEvent } from "@ionic/react-test-utils";

  

 
  // using RTL fireEvent - no change
  it("fires change event on firstname", () => {
    const { baseElement } = renderGolferContext(mockGolfer);
    const firstNameField = screen.getByTestId("firstname-field") as HTMLInputElement;
    fireEvent.change(firstNameField, { target: { detail: { value: "Jill" } } });
    expect(firstNameField.value).toBe("Jill");
  });

  // using IRTL ionFireEvent/ionChange - no change
  it("fires change event on firstname", () => {
    const { baseElement } = renderGolferContext(mockGolfer);
    const firstNameField = screen.getByTestId("firstname-field") as HTMLInputElement;
    ionFireEvent.ionChange(firstNameField, "Jill");
    expect(firstNameField.value).toBe("Jill");
  });    
    screen.debug(baseElement);

  

Я также попытался переместить свойство data-testid в контроллер, а не IonInput предлагаемое здесь, с тем же результатом: событие не запускается.

Вот версии, которые я использую:

 Using Ionic 5.1.1
@ionic/react-test-utils 0.0.3
jest  24.9
@testing-library/react 9.5
@testing-library/dom 6.16
  

Вот репозиторий, который я создал для демонстрации.

Любая помощь будет высоко оценена!

эта строка кажется неверной…

expect(firstNameField.value).toBe("Jill");

Это следует учитывать, detail.value поскольку это то, что вы установили

expect((firstNameField as any).detail.value).toBe("Jill");

это мой тест,

 describe("RTL fireEvent on ion-input", () => {
  it("change on firstname", () => {
    const { baseElement, getByTestId } = render(<IonicHookForm />);
    const firstNameField = screen.getByTestId(
      "firstname-field"
    ) as HTMLInputElement;
    fireEvent.change(firstNameField, {
      target: { detail: { value: "Princess" } },
    });
    expect((firstNameField as any).detail.value).toEqual("Princess");
  });
});