Can't access IonInput value inside the test

Issue

How I access the value of IonInput field using react testing library. See my example, If I replace html text input instead of IonInput it's working fine.

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', () => {
        render(<MyComponent />);
        const input = screen.queryByTestId('test-input');

        expect(input.value).toBe('123');

        // This input.value be undefined
        console.log('input.value', input.value); // undefined
    });
});

Solution

Found a solution to this issue. See example.

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', () => {
        render(<MyComponent />);
        const input = screen.queryByTestId('test-input');
        // Use input.getAttribute('value')
        expect(input.getAttribute('value')).toBe('123');
    });
});

Can access any attribute like this.

Answered By - Charith Amila