"ReferenceError: Worker is not defined when running tests in Jest" - unit-testing

Question

I am using Jest to run tests for a React app, and I am seeing the following error when running the tests:
ReferenceError: Worker is not defined
This error is occurring even though the component that is being tested is not using the heic2any library. The error is causing the tests to stop running.
Here is the code for the component that is being tested:
import { Button } from '#material-ui/core';
import { ReactElement } from 'react';
import useBreakpoint from 'src/hooks/useBreakpoint';
interface ActionButtonProps {
isMobileOnly?: boolean;
icon?: ReactElement;
onClick?: () => void;
['data-testid']?: string
}
const ActionButton = ({ isMobileOnly = false, icon, onClick, ...rest }: ActionButtonProps) => {
const { isMobile } = useBreakpoint();
const text = isMobile ? 'Add' : 'Add Photo Description Set';
if ((!isMobile && isMobileOnly) || (isMobile && !isMobileOnly)) {
return null;
}
return (
<Button
data-testid={rest['data-testid']}
startIcon={icon}
variant="outlined"
onClick={onClick}
>
{text}
</Button>
);
};
export default ActionButton;
This is the code of the component where heic2any was imported (which is another file)
import React from 'react';
import { SxProps } from '#material-ui/system';
import { PencilAlt } from 'src/icons';
import heic2any from 'heic2any';
interface FileImageDropzoneProps extends DropzoneOptions {
cardMediaSx?: SxProps;
}
const FileImageDropzone: React.FC<FileImageDropzoneProps> = (props) => {
// component code goes here...
};
export default FileImageDropzone;
Here's my unit test:
import ActionButton from '../ActionButton';
import { render, screen, cleanup, fireEvent } from '#testing-library/react';
import useBreakpoint, { BreakpointHook } from 'src/hooks/useBreakpoint';
import '#testing-library/jest-dom';
afterEach(cleanup)
jest.mock('src/hooks/useBreakpoint');
const mockUseBreakpoint: jest.Mock<BreakpointHook> = useBreakpoint as jest.Mock<BreakpointHook>;
describe('ActionButton', () => {
it('should render the compnent', () => {
render(<ActionButton data-testid='action-button' />);
mockUseBreakpoint.mockReturnValue({
isMobile: true,
isDesktop: false,
})
const { getByTestId } = screen
expect(getByTestId('action-button')).toBeInTheDocument()
});
});
Here's my jest config :
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
transform: {
'^.+\\.tsx?$': [
'ts-jest',
{
isolatedModules: true,
},
],
},
testMatch: ['**/src/**/__tests__/**/*.test.ts?(x)'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
collectCoverage: true,
coveragePathIgnorePatterns: [
'/node_modules/',
'/__tests__/',
'/dist/',
'/coverage/',
],
setupFilesAfterEnv: [
'#testing-library/jest-dom/extend-expect',
'jest-canvas-mock',
'<rootDir>/jest.setup.ts',
],
moduleNameMapper: {
'^components/(.*)$': '<rootDir>/src/components/$1',
},
testPathIgnorePatterns: ['node_modules'],
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src',
},
moduleDirectories: ['node_modules'],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};
I am not sure why this error is occurring or how to fix it. Can anyone help me understand what is causing this issue and how to resolve it? The error even shows even if i commented out the it()