Basically, I want to generate a screenshot of render elements in png format but i am facing an issue regarding the image which is generated shows an error while opening inside the image snapshot director. Can you suggest me some solutions inside which a puppeteer is not used.

I am trying to convert elements into image by installing html-to-image dependancies but after the installation i face an error that “node node_modules/@xyz/tooling/js/jest_wrapper.js test –watchAll=false”. Please provide some solutions so that i would be able to generate screenshot or image snapshot by writing test cases using react testing libraries.

import { renderWithCtx as render } from 'js/testUtils';
import { act, cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
import AwButton from 'viewmodel/AwButtonViewModel';
import { toMatchImageSnapshot } from 'jest-image-snapshot';

expect.extend({ toMatchImageSnapshot });

const mockProps = () => {
    return {
        id: 'id',
        'aria-label': 'btn',
        type: 'button',
        action: jest.fn(),
        tooltip: 'tooltip',
        iconId: 'cmdOpen',
        buttonType: 'accent-positive',
        size: 'auto'
    };
};

describe('testing AwButton component', function() {
    afterEach(cleanup);

    it('should display icon btn when specified iconId', async () => {
        let props = mockProps();
        let element = await render(<AwButton {...props}>mock btn</AwButton>);
        // only show icon
        let icon = await element.container.querySelector('*[icon-id=' + props.iconId + ']');
        await waitFor(() => {
            expect(element).toBeTruthy();
            expect(icon).toBeTruthy();
            // not show children
            expect(screen.queryByText(/mock btn/i)).not.toBeTruthy();
        });
    });

    it('should display normal btn when not specified iconId', async () => {
        let props = mockProps();
        delete props.iconId;
        let element = await render(<AwButton {...props}>mock btn</AwButton>);
        // class
        let btn = await element.container.querySelector('button');
        await waitFor(() => {
            expect(element).toBeTruthy();
            // show children
            expect(screen.queryByText(/mock btn/i)).toBeTruthy();
            expect(btn.getAttribute('class')).toContain('accent-positive');
        });
    });

    it('should call click handler when btn was clicked', async () => {
        let props = mockProps();
        delete props.iconId;

        let element = await render(<AwButton {...props}>mock btn</AwButton>);
        let btn = await element.container.querySelector('button');
        await act(async () => fireEvent.click(btn));
        await waitFor(() => {
            expect(element).toBeTruthy();
            expect(props.action).toHaveBeenCalled();
        });
    });

    it('should generate a screenshot of the button', async () => {
        let props = mockProps();
        let element = await render(<AwButton {...props}>mock btn</AwButton>);

        // Render the component and convert it to HTML string
        const html = element.container.innerHTML;

        // Use jest-image-snapshot to match the HTML string snapshot
        expect(html).toMatchImageSnapshot();
    });
});