“ReferenceError：在 Jest 中运行测试时未定义 Worker”

Question

我正在使用 Jest 来运行 React 应用程序的测试，并且在运行测试时看到以下错误：

ReferenceError: Worker is not defined

即使正在测试的组件未使用 heic2any 库，也会发生此错误。该错误导致测试停止运行。

这是正在测试的组件的代码：

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;

这是导入heic2any的组件的代码（这是另一个文件）

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;

这是我的单元测试：

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()
  });
});

这是我的笑话配置：

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,
    },
  },
};

我不确定为什么会发生此错误或如何修复它。谁能帮助我了解导致此问题的原因以及如何解决它？即使我注释掉了 it()，该错误仍然会显示

Answer 1

您可以将此行添加到您的单元测试用例文件中。

jest.mock("heic2any", () => ({ window: jest.fn() }));