How to write unit test cases for addEventListener on web custom component in javaScript

I got a chance to write unit test cases for javaScript client to increase code coverage upto 80%. I am able to write unit test cases for methods & other stuff but badly stuck with writing test cases for addEventListener. I have tried to find solution on the google , but no luck so far. I didnt get much about web custom component on the google, Badly stuck with this task. I am desperately looking out for the solution. Hence, I thought to raise my doubt in this forum.

Any suggestion or input would be highly appreciated & great help to me! Thanks for reading .

userCard.js

(() => {
    class UserCard extends HTMLElement {

        constructor() {
            super();

            this.attachShadow({ mode: 'open' });

            this.shadowRoot.innerHTML = `

                <div class="user-card">
                    <img />
                    <div>
                        <h3></h3>
                    </div>
                </div>
                <div id="reason">
                click here
                </div>
          `;
            this._title = "good work sajid 2";
            this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name');
            this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');
            this.reasonElem = this.shadowRoot.getElementById('reason');


            //how to write test cases for this click event ???
            this.reasonElem.addEventListener('click', this.clickFunction, false);

            this.clickFunction = () => {
                console.log("inside of clickFunctions")
            };

            //able to write test for keypress event
            this.setupEvents = () => {
                document.addEventListener('keypress', this.pressed.bind(this), false);
            };

            this.pressed = () => {
                // Called when keypress event is fired
                console.log("inside of pressed");
            }

        }
    }

    window.customElements.define('user-card', UserCard);
    module.exports = UserCard
})();

userCard.test.js

const userCard = require('./userCard');

describe('My Test', () => {
    let sut;
    let events = {};

    beforeEach(() => {
        sut = new userCard();

        // Empty our events before each test case
        events = {};

        // Define the addEventListener method with a Jest mock function
        document.addEventListener = jest.fn((event, callback) => {
            events[event] = callback;
        });

        document.removeEventListener = jest.fn((event, callback) => {
            delete events[event];
        });
    });

    test('Test Keypress fires callback', () => {
        // Watch the function that gets called when our event fires
        jest.spyOn(sut, 'pressed');

        // A method inside of our userCard that sets up event listeners
        sut.setupEvents();

        // Fire the keypress event
        events.keypress({ key: 'Enter' });


        // We fired an event, so this should have been called
        expect(sut.pressed).toHaveBeenCalled();
    });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Components Example</title>
</head>
<body>
    <h3>Hello World</h3>

    <user-card name="John Doe" avatar="https://randomuser.me/api/portraits/men/1.jpg" value="100"></user-card>

    <script src="userCard.js"></script>
</body>
</html>

package.json

{
  "name": "jest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest --collectCoverage true"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^27.3.1"
  },
  "dependencies": {
    "global-jsdom": "^8.3.0",
    "jsdom": "^18.0.0"
  }
}

Sample Code: https://github.com/sajid983356/jest-web-component/tree/main