'How to react test bootstrap buttons

I have a component which has a bunch of toggle buttons which are nothing but bootstrap buttons. Now I want to write a test case where when a user clicks a particular button, The should have the value of the button which has been clicked. But in my test case the Received is always somehow "undefined". Can someone please help me with this.

My react component:

/* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call*/
import React, { useState } from 'react';
import ToggleButton from 'react-bootstrap/ToggleButton';
import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
import '../styles/components/_LoanType.scss';

const LT: React.VFC = () => {

    const [selectedLT, setSelectedLT] = useState<string>('frl);
    const changeLT = (value: string) => {
        setSelectedLT(value);
    };

    return (
        <div className="loan-type">
            <h4>{getStaticContent(title)}</h4>
            <ToggleButtonGroup data-testid="testToggleButtonGroup" type="radio" name="radio" value={selectedLT} onChange={changeLT}>
                <ToggleButton data-testid='frl' value={'frl'} >1</ToggleButton>
                <ToggleButton data-testid='vrl' value={'vrl'} >2</ToggleButton>
                <ToggleButton data-testid='spl' value={'spl'} >3</ToggleButton>
            </ToggleButtonGroup>
        </div>
    );
};

export default LT;

My test case:

import { fireEvent, render, RenderResult, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import userEvent from '@testing-library/user-event';
import { store } from '../store/store';
import LT from './LT';

const setup = (): RenderResult => render(
    <Provider store={store}>
        <LT/>
    </Provider>
);

describe('LoanPurpose', () => {
    it('should render', () => {
        setup();

        const btnGroup = screen.getByTestId('testToggleButtonGroup');
        const btn = screen.getByTestId('frl');
        userEvent.click(btn);
        
        expect(btnGroup).toHaveValue('frl');
    });
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source