使用React Testing Library测试时无法获取IonInput的value值如何解决

问题原因 #

IonInput 是Ionic封装的自定义Web组件，并非原生HTML输入元素。你通过data-testid="test-input"查询到的DOM节点是IonInput的外层宿主节点，并不是组件内部实际承载输入值的原生<input>元素，因此直接读取.value属性会返回undefined。

解决方案 #

调用IonInput组件暴露的异步方法getInputElement()获取内部原生输入元素，再读取value即可，测试代码需要调整为异步逻辑：

import { useState } from 'react';
import { render, screen } from '@testing-library/react';
import { IonInput } from '@ionic/react';

function MyComponent() {
    const [value, setValue] = useState('123');
    return (
        <IonInput
            data-testid="test-input"
            value={value}
            onIonChange={(e) => setValue(e.detail.value)}
        />
    );
}

describe('Test MyComponent', () => {
    // 声明测试为异步函数
    test('Test input change', async () => {
        render(<MyComponent />);
        const ionInput = screen.queryByTestId('test-input');
        // 获取IonInput内部的原生input元素
        const nativeInput = await ionInput.getInputElement();

        expect(nativeInput.value).toBe('123');
        console.log('input.value', nativeInput.value); // 正常输出 123
    });
});

原问题运行效果截图：

内容的提问来源于stack exchange，提问作者Charith Amila