LWC JEST to select options in lightning-radio-group

 Lightning radio group tag in LWC JEST Test

Select elements in lightning web components are similar to all the elements, but for lightning-radio-group is slightly different.  To select the Options in lightning-radio-group tag, we have to fire an event with an object of that option. 

event evt = new CustomEvent('change', {detail: {value: 'option2'}});
dispatchEvent(evt);

Let's see how we can select an option in JEST to test the LWC component with an example.

exLightningRadioGroupJest.html

<template>
    <lightning-card title="Example Radio Group JEST" icon-name="standard:account">
       <div class="slds-m-around_medium">
            <lightning-radio-group name="radioGroup"
                                   label="Select a Fruit"
                                   options={options}
                                   value={value}
                                   type="radio"
                                   onchange={handleClick}>
            </lightning-radio-group>
            
            <p>Selected Value Is: {selectedValue}</p>
       </div>
    </lightning-card>
 </template>

exLightningRadioGroupJest.js

import { LightningElement } from 'lwc';

export default class ExLightningRadioGroupJest extends LightningElement {
    value = '';
    selectedValue; 
    
    // Options list to show on page
    get options() {
        return [
            { label: 'Apple', value: 'Option1' },
            { label: 'Banana', value: 'Option2' },
            { label: 'Cherry', value: 'Option3' },
            { label: 'Date', value: 'Option4' },
            { label: 'Elderberry', value: 'Option5' },
        ];
    }

    // On selection get the selected value
    handleClick(event){
      this.selectedValue = event.detail.value;
    }
}

exLightningRadioGroupJest.js-meta.xml

    49.0
    true
    
        lightning__AppPage
    

exLightningRadioGroupJest.test.js

import { createElement } from 'lwc';
import exLightningRadioGroupJest from 'c/exLightningRadioGroupJest';

describe('ex-Lightning-Radio-Group-Jest', () => {
    afterEach(() => {
        // The jsdom instance is shared across test cases in a single file so reset the DOM
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });

    it('Display selected option on radio group', () => {
        // Create element
        const element = createElement('c-ex-Lightning-Radio-Group-Jest', {
            is: exLightningRadioGroupJest
        });
        document.body.appendChild(element);

        // enter sample text in inputbox
        let radioEl = element.shadowRoot.querySelector('lightning-radio-group');
        radioEl.dispatchEvent(new CustomEvent('change', {detail: {value: 'option2'}}));

        return Promise.resolve()
        .then(() => {
            // Verify displayed value
            const div = element.shadowRoot.querySelector('p');
            expect(div.textContent).toBe('Selected Value Is: option2');
        });
    });
});

Also found above code in Tech Shorts Git repo