使用反应测试库测试离子组件

Posted 2021-04-13

我最近开始使用新的ionic 4，它引入了react而不是角度语言。在最近的项目中，我正在使用react-testing-library测试组件的反应。尤其是涉及表格以及表格的提交/更改时。由于ionic使用自己的Web组件而不是本机的Web组件（离子输入而不是输入），因此无法触发诸如更改值之类的事件。如果这样做，我会收到错误消息，该元素没有值的设置器。研究DOM树时，有一个本地输入元素作为ion-input元素的子元素。似乎他们正在通过refs通信，因为本机输入上不存在任何值。

现在更改测试用例中字段值的正确方法是什么？我也无法使用querySelector查询本机输入元素。它返回并清空对象。当查询ion-input时，返回元素。

感谢每个想法：）

答案

如果使用onIonChange事件，则需要为此触发一个自定义事件，例如：

    const { getByPlaceholderText } = render(...);
    const input = getByPlaceholderText('Input placeholder');

    fireEvent(input, new CustomEvent('ionChange', { detail: { value: 'Text' } }));