带有 Ionic v5 (react) 和 react-hook-form-change 事件的 React-testing-library 不会触发

Question

我正在尝试测试使用 Controller 从 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}
          />

当我使用一些模拟数据渲染组件时，默认值符合预期。但是，当我着手更改值时，事件似乎没有触发。从 this 博客 post 看来，ionic 导出了一组测试实用程序来处理 ionic 的自定义事件。在我的 setupTests.ts 中进行设置后，我尝试同时使用 RTU 的 ionFireEvent 和 fireEvent，当我使用 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 建议的 here，结果是一样的：没有事件被触发。

以下是我使用的版本：

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

Here is a repo我创建是为了演示。

如有任何帮助，我们将不胜感激！

Answer 1

这行似乎不正确...

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");
  });
});

带有 Ionic v5 (react) 和 react-hook-form-change 事件的 React-testing-library 不会触发

React-testing-library with Ionic v5 (react) and react-hook-form- change events do not fire

ionic-framework

react-testing-library

ionic-react