使用Ionic v5的React-testing-libraryreact和react-hook-form-change事件不会触发

如何解决使用Ionic v5的React-testing-libraryreact和react-hook-form-change事件不会触发

我正在尝试使用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博客中，似乎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我是为了演示而创建的。

任何帮助将不胜感激！

解决方法

此行似乎不正确...

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