1

I've created a lwc component that shows radio button. On Selecting the button, I call handleChange method as shown below.

<template>
        <lightning-radio-group name="radioGroup"
                            label={label}
                            options={options}
                            value={value}
                            type="radio"
                            onchange={handleChange}>
        </lightning-radio-group>
</template>

handleChange(event) {
        this._selectedData = event.detail.value;
        const attributeChangeEvent = new FlowAttributeChangeEvent('selectedData', this._selectedData);
        this.dispatchEvent(attributeChangeEvent);
    }

I want to assert that the event flowAttributeChangeEvent is dispatched but I am not able to do so. Here is my test

import { createElement } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

const element = createElementdata();
            const handler = jest.fn();
            element.addEventListener(FlowAttributeChangeEvent, handler);

            return flushPromises().then(() => {
                
                let radioGrp= element.shadowRoot.querySelector('lightning-radio-group');
                const event = new CustomEvent("change", {detail:{value: 'a0s0912031029201'}});
                radioGrp.dispatchEvent(event);
                
            }).then(() =>{
                expect(element.selectedData).toBe('a0s0912031029201');
                expect(handler).toHaveBeenCalled();
            });

The last expect statement fails giving me JestAssertionError. So, how can i assert that the flowAttributeChangeEvent is dispatched ?

1

You can directly mock the event using the below

 element.addEventListener(‘lightning__flowattributechange’, handler)

Update

You can also use the moduleMapper of jest configuration to make sure event fires.

Create a folder jest-mocks/lightning in root directory.

Add the below code to a file named flowSupport.js create in path jest-mocks/lightning

The code is shown for flowSupport.js is as below

export const FlowAttributeChangeEventName = 'lightning__flowattributechange';

export class FlowAttributeChangeEvent extends CustomEvent {
 constructor(attributeName, attributeValue) {
    super(FlowAttributeChangeEventName, {
        composed: true,
        cancelable: true,
        bubbles: true,
        detail: {
            attributeName,
            attributeValue
        }
    });
  }
}

Also to make sure this is available create a jest.config.js in the root of the project folder

const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
module.exports = {
  ...jestConfig,
   moduleNameMapper: {
    '^lightning/flowSupport$': '<rootDir>/jest-mocks/lightning/flowSupport'
   }
 };

And make sure you add the below to your jest file

import { FlowAttributeChangeEventName } from 'lightning/flowSupport';

Dispatch the event as shown below

const mockEventHandler = jest.fn();
        element.addEventListener(
            FlowAttributeChangeEventName,
            mockEventHandler
        );
| improve this answer | |
  • That is still throwing the same error. I think the flow attribute event is not dispatched in test becaue when I do expect(handler).not.toHaveBeenCalled(); then the test passes. – lambad Sep 3 at 15:37
  • Can you add some more code that one can easily reproduce it? Specifically what you do with flushPromises() and also createElement()? – Mohith Shrivastava Sep 3 at 16:24
  • Thanks, answer update helped. – lambad Sep 5 at 2:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.