You just need to follow two steps:

//Mock FileReader
    Object.defineProperty(global, "FileReader", {
      writable: true,
      value: jest.fn().mockImplementation(() => {
        return {
          readAsDataURL: jest.fn(function () {
            // Directly set the result on the FileReader instance
            this.result = "data:image/jpeg;base64,base64string";
            // Trigger the onload method correctly
            this.onload({ target: this });
          }),
          onload: jest.fn()
        };
      })
    });

Second: Calling the change event to upload the file

    const uploadedFile = new File(["dummy,content"], "test.jpeg", {
      type: "image/jpeg"
    });
    const uploadElement = element.shadowRoot.querySelector(
      '[data-id="uploadProfilePhoto"]'
    );
    const changeEvent = new CustomEvent("change", { bubbles: true });
    Object.defineProperty(changeEvent, "target", {
      value: { files: [uploadedFile] },
      enumerable: true
    });
    uploadElement.dispatchEvent(changeEvent);
    ```

You just need to follow two steps:

//Mock FileReader
    Object.defineProperty(global, "FileReader", {
      writable: true,
      value: jest.fn().mockImplementation(() => {
        return {
          readAsDataURL: jest.fn(function () {
            // Directly set the result on the FileReader instance
            this.result = "data:image/jpeg;base64,base64string";
            // Trigger the onload method correctly
            this.onload({ target: this });
          }),
          onload: jest.fn()
        };
      })
    });

Second: Calling the change event to upload the file

    const uploadedFile = new File(["dummy,content"], "test.jpeg", {
      type: "image/jpeg"
    });
    const uploadElement = element.shadowRoot.querySelector(
      '[data-id="uploadProfilePhoto"]'
    );
    const changeEvent = new CustomEvent("change", { bubbles: true });
    Object.defineProperty(changeEvent, "target", {
      value: { files: [uploadedFile] },
      enumerable: true
    });
    uploadElement.dispatchEvent(changeEvent);
   

You just need to follow two steps: //Mock FileReader Object.defineProperty(global, "FileReader", { writable: true, value: jest.fn().mockImplementation(() => { return { readAsDataURL: jest.fn(function () { // Directly set the result on the FileReader instance this.result = "data:image/jpeg;base64,base64string"; // Trigger the onload method correctly this.onload({ target: this }); }), onload: jest.fn() }; }) });

Second: //Calling the change event to upload the file const uploadedFile = new File(["dummy,content"], "test.jpeg", { type: "image/jpeg" }); const uploadElement = element.shadowRoot.querySelector( '[data-id="uploadProfilePhoto"]' ); const changeEvent = new CustomEvent("change", { bubbles: true }); Object.defineProperty(changeEvent, "target", { value: { files: [uploadedFile] }, enumerable: true }); uploadElement.dispatchEvent(changeEvent);

You just need to follow two steps:

//Mock FileReader
    Object.defineProperty(global, "FileReader", {
      writable: true,
      value: jest.fn().mockImplementation(() => {
        return {
          readAsDataURL: jest.fn(function () {
            // Directly set the result on the FileReader instance
            this.result = "data:image/jpeg;base64,base64string";
            // Trigger the onload method correctly
            this.onload({ target: this });
          }),
          onload: jest.fn()
        };
      })
    });

Second: Calling the change event to upload the file

    const uploadedFile = new File(["dummy,content"], "test.jpeg", {
      type: "image/jpeg"
    });
    const uploadElement = element.shadowRoot.querySelector(
      '[data-id="uploadProfilePhoto"]'
    );
    const changeEvent = new CustomEvent("change", { bubbles: true });
    Object.defineProperty(changeEvent, "target", {
      value: { files: [uploadedFile] },
      enumerable: true
    });
    uploadElement.dispatchEvent(changeEvent);
    ```